動態創建html的事件偵聽器

我動態生成html，並且我想要添加的元素具有事件偵聽器。「board」div位於我的html文件中，並創建了「myDiv」元素。這部分工作。動態創建html的事件偵聽器

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，但沒有任何警報出現像它應該。我怎樣才能解決這個問題？謝謝！

來源

2014-09-23 user2529426

在添加偵聽器之前追加元素 – 2014-09-23 19:03:21

您的工作原理完美無瑕 - > ** http：//jsfiddle.net/udjz9218/** – adeneo 2014-09-23 19:04:44

您可以禁用警報嗎？ – 2014-09-23 19:06:55

繼我對禁用警報的評論。

在Firefox中：about:config輸入你的地址欄中，並嘗試切換

prompts.tab_modal.enabled

Source

來源

2014-09-23 19:11:56

這將是很容易使用JQuery：

例如，您的HTML：

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

而你追加數據int ØDIV＃箱，如：

$('#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() { ... });

，它會工作的所有您將創建的元素。

來源

2014-09-23 19:13:43

動態創建html的事件偵聽器

回答

相關問題