Question

我正在尝试将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>

Answer 1

因为在循环的每次迭代中，当你执行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解析的新节点，而不是每次都破坏和重建内容。

Nicer将使用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);

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

动态生成的元素不会捕获事件

2 个答案: