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

然后我将'myDiv'元素附加到棋盘上。它按预期显示在屏幕上

board.appendChild(myDiv);

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

Answer 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() { ... });

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

Answer 2

关于警告被禁用的评论。

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

prompts.tab_modal.enabled

Source

动态创建html的事件侦听器

2 个答案: