Javascript 动态生成的元素不'；t捕捉事件_Javascript_Events

Javascript 动态生成的元素不'；t捕捉事件

javascript events

Javascript 动态生成的元素不'；t捕捉事件,javascript,events,Javascript,Events,我试图将onclick事件附加到动态创建的元素，但只有最后一个元素捕获事件。。。为什么? 代码如下： <!DOCTYPE HTML> <html> <head><title>Error</title></head> <body> <div id="wrapper"> </div> <script type="text/javascript">

我试图将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>


错误
window.addEventListener（“加载”，函数（e）{
var wrapper=document.getElementById（“wrapper”）；
对于（i=1；i，问题在于浏览器从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);
}

var wrapper=document.getElementById（“wrapper”）；
对于（i=1；i，因为在循环的每次迭代中，当您执行wrapper.innerHTML+=…
时，您将完全销毁wrapper
中的所有节点
我并不热衷于将.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);

谢谢，我的英语很差。谢谢，我花了一整天来解决这个问题，…我从js开始
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);