<分区>
我正在使用 JavaScript 创建复选框，向它们添加 onchange 监听器并使用循环将它们添加到 div。但是，只有最后一个复选框注册了事件监听器。
为什么会这样？
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>最佳答案
使用 Element.innerHTML 属性附加到 div 会删除现有的事件处理程序，因为它确实在这样做......
div.innerHTML = (div.innerHTML + '<br>' + i);
因此它完全重写了 HTML，所有事件处理程序都丢失了。
改用 Document.createElement() 和 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>关于javascript - 为什么事件监听器只在 for 循环中创建的最后一个元素上注册？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/30684111/