Dynamisches Ereignis bei Klickereignis

Question

Ich habe eine Tabelle aus einem JSON-Array geladen, aber meine Click-Event-Lösung scheint nicht zu funktionieren. Wenn die Schleife durchlaufen wird, füge ich jedem Listener zu jedem der neuen hinzugefügten divs ein click -Ereignis hinzu.

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

Das Problem ist nur das letzte Element reagiert auf die Klicks.

Mein Code ist auf verfügbar pastebin

Answer 1

Dies geschieht wegen der Art, die Sie gerade versuchen, neue Elemente zu Ihrem HTML hinzuzufügen.

Ersetzen Sie diese (was Sie gerade tun):

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

dies mit:

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); 

Hier ein fiddle ist, die eine einfachere Version dieser Arbeits zeigt.

Answer 2

Meiner Meinung nach,

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

diesem Code überschreiben zu vorangegangenen nw der Elemente und dessen Ereignis-Listener.

Verwenden Sie daher anstelle von innerHTML document.createElement("div") und fügen Sie es an nw mit appendChild(). Es funktioniert in meinem Test.