動態創建的 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

資源