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

Question

我正在动态生成 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

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

board.appendChild(myDiv);

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

Answer 1

使用 JQuery 会很容易：

例如，您的 html：

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

并且您将 append 数据放入 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() { ... });

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

Answer 2

按照我关于禁用警报的评论。

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

prompts.tab_modal.enabled

资源