動態點擊事件問題

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。它適用於我的測試。