appendChild 之后的 addEventListener

addEventListener after appendChild

提问人：Leo 提问时间：1/23/2014 最后编辑：Daniel ImmsLeo 更新时间：1/23/2014 访问量：30906

问：

我创建一个元素，带有 etc 并将其添加到 DOM 中，如下所示（包含 的）：eltTooltipdocument.createElementidTooltipideltTooltip

document.body.appendChild(eltTooltip);
var addedElt = document.getElementById(idTooltip);
addedElt.addEventListener("click", function(){...});

是否保证在此处添加事件，或者 DOM 是否还没有为此做好准备？click

我能以更好的方式做到这一点吗？（该页面很久以前加载过，因此无法使用。而且我不能在这里使用jQuery。window.onload

JavaScript DOM

评论

2赞 SLaks 1/23/2014
你不需要 ;您可以使用创建它时存储它的变量。getElementById
0赞 Leo 5/13/2015
啊，是的，当然。我只是从代码的一些不同部分进行了复制和粘贴...... ;-）

答：

20赞 Daniel Imms 1/23/2014 #1

您的方式运行良好，但最好在使用 .这样可以避免从 DOM 获取元素。eltTooltip

演示

var idTooltip = 'test';
var eltTooltip = document.createElement('div');
eltTooltip.innerHTML = "test"
eltTooltip.setAttribute('id', idTooltip);
eltTooltip.addEventListener("click", function () {
    alert('click');
});

document.body.appendChild(eltTooltip);

评论

0赞 Leo 1/23/2014
谢谢Dainiel和@SLaks。你在哪里找到这方面的信息？
2赞 Daniel Imms 5/13/2015
主要问题是您再次使用 .将它添加到 DOM 中更像是一个代码清洁度的事情（在添加元素之前完成对元素的处理），如果您在调用后也附加它，它应该可以工作。document.getElementByIdaddEventListenerappendChild
0赞 Leo 5/13/2015
当然是一个错误，我不太擅长清理代码。;-） -- 我想你是对的。很长一段时间以来，我没有看到这样的代码出现任何奇怪的问题。
2赞 Suman Bogati 1/23/2014 #2

你可以做这样的事情

window.onload = function (){
    var toolTip = document.createElement('div');
    toolTip.innerHTML = "someData";
    toolTip.addEventListener('click', myfunction);
    document.body.appendChild(toolTip);

    function myfunction(){
        alert("hello guys ");
    }
}

评论

0赞 Leo 1/23/2014
谢谢苏曼。（这是我第三次参加这个委员会。想知道它为什么消失了？
0赞 Suman Bogati 1/23/2014
你来了。现在我明白了，投票答案是感谢的好方法。

上一个：适用于 Windows 的 GitHub 忘记了所有存储库

下一个：如何在 Node.js 中创建 Blob？