动态点击事件问题

Question

我有一个表从JSON数组中加载，但我的点击事件解决方案似乎并没有工作。随着循环的循环，我为每个侦听器添加一个点击事件给每个新添加的div。

document.getElementById(i.toString()).addEventListener("click", function(event) 
{ 
    console.log(event); 
}); 

问题只是响应点击的最后一个元素。

我的代码可以在pastebin

Answer 1

这是因为发生的方式，你正在尝试新的元素添加到您的HTML。

替换此（目前你在做什么）：

nw.innerHTML = nw.innerHTML + "<div class='" + nodeType + "' id='" + i + "'><div class='nodeName'>" + json[i][0] + "</div></div>"; 

有了这个：

var div = document.createElement("div"); 
div.setAttribute("class", nodeType); 
div.setAttribute("id", i.toString()); 
div.innerHTML = '<div class="nodeName">' + json[i][0] + '</div>'; 
nw.appendChild(div); 

这里有一个fiddle，显示这个工作的一个简化版本。

Answer 2

在我看来，

nw.innerHTML = nw.innerHTML + "<div class='" + nodeType + "' id='" + i + "'><div class='nodeName'>" + json[i][0] + "</div></div>"; 

这个代码覆盖以前的NW的元素和它们的事件侦听器了。

因此，不是使用innerHTML，而是尝试使用document.createElement("div")并使用appendChild()将它附加到nw。它适用于我的测试。