Warum registriert sich der Ereignis-Listener nur für das letzte in for loop erstellte Element?

Question

Ich erstelle Kontrollkästchen mit JavaScript, Hinzufügen der onchange Listener zu ihnen und Hinzufügen von ihnen zu einem div mit einer Schleife. Nur das letzte Kontrollkästchen hat jedoch den Ereignis-Listener registriert.

Warum passiert das?

var div = document.getElementById("mydiv"); 
 
for (var i = 0; i < 5; i++) { 
 
    div.innerHTML += ("<br>" + i); 
 
    var input = document.createElement("input"); 
 
    input.type = "checkbox"; 
 
    input.onchange = function() { 
 
     alert("foo"); 
 
    }; 
 
    div.appendChild(input); 
 
}

<div id="mydiv"></div>

Answer 1

Anfügen zu div mit der Element.innerHTML Eigenschaft entfernt die bestehenden Event-Handler, weil es wirklich tut dies ...

div.innerHTML = (div.innerHTML + '<br>' + i); 

es umschreibt also vollständig HTML und alle Ereignis Handler sind verloren.

Verwenden Sie stattdessen Document.createElement() und Document.createTextNode().

var div = document.getElementById("mydiv"); 
 
for (var i = 0; i < 5; i++) { 
 
    div.appendChild(document.createElement('br')); 
 
    div.appendChild(document.createTextNode(i)); 
 
    var input = document.createElement("input"); 
 
    input.type = "checkbox"; 
 
    input.onchange = function() { 
 
     alert("foo"); 
 
    }; 
 
    div.appendChild(input); 
 
}

<div id="mydiv"></div>