動態生成的元素不捕獲事件

我試圖將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>

來源

2013-07-14 Phraellyn

謝謝，我的英文很糟糕。 – Phraellyn

因爲在循環的每次迭代，你就徹底摧毀裏面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-14 21:43:48

謝謝，我整天都在用這個問題，...我以js開頭 – Phraellyn

不客氣。 –

的問題是，瀏覽器的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-14 21:43:29 user1759572

動態生成的元素不捕獲事件

回答

相關問題