動的クリックイベントの問題

Question

JSON配列からテーブルをロードしていますが、クリックイベントソリューションが動作していないようです。ループが繰り返されると、各追加された各divの各リスナーにclickイベントが追加されます。

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

問題は、クリックに反応するのは最後の要素だけです。

私のコードは、これは道のあなたが現在あなたのHTMLに新しい要素を追加しようとしているので、何が起こっているpastebin

Answer 1

で提供されています。

この（あなたが現在何をしているか）に置き換えます。これにより

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の要素とそれらのイベントリスナー。

したがって、document.createElement("div")を使用してnwに追加して、appendChild()を使用してください。それは私のテストで動作します。