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

Event listener for dynamically created html

本文关键字：侦听器 事件 html 动态 创建      更新时间：2023-09-26

我正在动态生成html，我希望添加的元素具有事件侦听器。"；板；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"事件侦听器，但从未出现过应有的警报。我该怎么解决这个问题？

下面是我关于禁用警报的评论。

在Firefox下：在地址栏中键入about:config，然后尝试切换

prompts.tab_modal.enabled

源

使用JQuery:会非常容易

例如，您的html:

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

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

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

之后你有smth像：

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

您必须以以下方式创建侦听器：

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

它将处理您将创建的所有元素。

相关文章：