动态创建的 html 的事件监听器答案

【问题标题】：Event listener for dynamically created html动态创建的 html 的事件监听器
【发布时间】：2014-09-24 03:13:43
【问题描述】：

我正在动态生成 html，并且我希望我添加的元素具有事件侦听器。 “board” div 在我的 html 文件中，我创建了“myDiv”元素。这部分有效。

var board = document.getElementById("board");
var myDiv = document.createElement('div');
myDiv.innerHTML="this is my div";

然后我尝试将事件侦听器添加到“myDiv”div。我已经尝试了以下所有方法：

myDiv.onclick=function(){alert('click')};

myDiv.addEventListener('click', function(){alert('click')});

myDiv.onclick=myFunction //myFunction just creates an alert like the others

然后我将“myDiv”元素附加到板上。它按预期显示在屏幕上

board.appendChild(myDiv);

div 元素按预期显示，当我在 chrome 中打开 javascript 控制台时，看起来该部分是正确的。此外，javascript 控制台说有一个附加到“myDiv”div 的“click”事件侦听器，但从来没有像它应该的那样出现警报。我怎样才能解决这个问题？谢谢！

【问题讨论】：

在添加监听器之前添加元素
你所拥有的一切都很好 -> jsfiddle.net/udjz9218
您是否禁用了警报？
@caeth 禁用弹出窗口不会禁用alert()。
哦等等！实际上，如果您的浏览器收到太多警报，则会弹出一个选项来禁用未来的警报（Firefox 的情况）。也许是因为这个？

标签： javascript html javascript-events

【解决方案1】：

使用 JQuery 会很容易：

比如你的html：

<div id="Box"></div>

然后将数据附加到 div#Box 中，例如：

$('#Box').append('<div class="js-item">Some content</div>');

之后你有类似的东西：

<div id="Box"><div class="js-item">Some content</div></div>

您必须通过以下方式创建监听器：

$('#Box').on('click', '.js-item', function() { ... });

它适用于您将创建的所有元素。

【讨论】：

【解决方案2】：

关注我关于禁用警报的评论。

在 Firefox 下：在地址栏中输入 about:config 并尝试切换

prompts.tab_modal.enabled

Source

【讨论】：