Question

所以我使用innerHTML来创建段落，然后在循环中将事件处理程序附加到它们。最后，事件仅在最后一个段落上触发，而之前的段落根本不响应点击。

另外，我也尝试使用DOM方法生成段落（意思是createElement，appendChild等），一切正常。所以如果有人解释这种方法的错误（使用innerHTML），我真的很感激。

代码：

window.onload=function(){
function a(){
    alert(this.innerHTML);
}
for(var i= 0; i<10; i++){
    document.body.innerHTML+="<p>Paragraph: "+i+"</p>";
    document.getElementsByTagName('p')[i].addEventListener('click', a, false);
}
}

修改的

所以我进行了一次正确的测试，结果证明事件监听器并没有附加，实际上它们在下一个循环中被附加并“分离”。

还使用DOM操作工作版本：

window.onload=function(){
/* Works when creating paragraphs using DOM methods. */
        function a(){
        alert(this.innerHTML);
    }
for(var i= 0; i<10; i++){
    var p= document.createElement("p");
    var txt= document.createTextNode("Paragraph: "+i);
    p.appendChild(txt);
    document.body.appendChild(p);
    document.getElementsByTagName('p')[i].addEventListener('click', a, false);
}
}

Answer 1

问题在于这一行：

document.body.innerHTML+="<p>Paragraph: "+i+"</p>";

基本上，这会从正文中获取字符串化的HTML并在其上附加一个字符串。然后，它将一根新绳子贴回身体。然后将该字符串解析为HTML。由于它只是一个插入到正文中的字符串，因此解析的所有元素都没有附加eventListeners。

最后一个<p>标记不受影响，因为之后不会更改正文的HTML。

DOM操作很有效，因为顾名思义，它是专门针对此进行的。

Javascript - 动态生成的事件处理程序无法正常工作（使用innerHTML时）

1 个答案: