2

我正在尝试将 onclick 事件附加到动态创建的元素，但只有最后一个元素捕获事件，...为什么？

这里的代码：

<!DOCTYPE HTML>

<html>
<head><title>Error</title></head>
<body>
    <div id="wrapper">
    </div>
    <script type="text/javascript">
        window.addEventListener("load",function(e) {
            var wrapper = document.getElementById("wrapper");
            for(i=1;i<5;i++) {
                wrapper.innerHTML += "<p><textarea id='text" + i + "'></textarea></p>";
                text = document.getElementById("text" + i);
                text.addEventListener("click",function(e) {
                    this.innerHTML = this.id;
                },false);
            }
        },false);
    </script>
</body>

4

2 回答 2

4

因为在循环的每次迭代中，wrapper当您执行wrapper.innerHTML += ....

我并不热衷于.innerHTML作为 DOM 操作的一种手段，但如果你必须，那就.insertAdjacentHTML()改用它。

window.addEventListener("load",function(e) {
    var wrapper = document.getElementById("wrapper");
    for(i=1;i<5;i++) {
        wrapper.insertAdjacentHTML("beforeend", "<p><textarea id='text" + i + "'></textarea></p>");
        var text = document.getElementById("text" + i);
        text.addEventListener("click",function(e) {
            this.innerHTML = this.id;
        },false);
    }
},false);

这将插入从您在该"beforeend"位置提供的 HTML 解析的新节点，而不是每次都销毁和重建内容。

更好的是使用 DOM 创建方法。

window.addEventListener("load",function(e) {
    var wrapper = document.getElementById("wrapper");
    for(i=1;i<5;i++) {
        var text = wrapper.appendChild(document.createElement("p"))
                          .appendChild(document.createElement("textarea"));
        text.id="text" + i;
        text.addEventListener("click",function(e) {
            this.innerHTML = this.id;
        },false);
    }
},false);
于 2013-07-14T21:43:48.753 回答
2

问题是浏览器从 innerHTML 创建 dom 对象，然后您将侦听器添加到该 dom 元素。当您设置新的 innerHTML 值时，浏览器会重新创建 dom，并且您的听众会因旧的 dom 元素而死。所以你需要先创建 dom 然后添加监听器。

var wrapper = document.getElementById("wrapper");
for(i=1;i<5;i++) {
    wrapper.innerHTML += "<p><textarea id='text" + i + "'></textarea></p>";
}
for(i=1;i<5;i++) {
    text = document.getElementById("text" + i);
    text.addEventListener("click",function(e) {
        this.innerHTML = this.id;
    },false);
}
于 2013-07-14T21:43:29.273 回答