JS事件監聽點擊消失

Question

我創建簡單fidlle

var cnt = 1; 
function add() { 
    var root = document.getElementById('root')  
    root.innerHTML += '<br /><a id= "a_' +cnt + '" href="#">click</a>' 
    var a = document.getElementById("a_"+cnt) 
    a.addEventListener('click', function(event) { 
     alert('click:a_'+cnt) 
    }) 
    cnt++ 
} 

當單擊Add按鈕一旦新的鏈接被添加並出現點擊此鏈接警報之後。

當僅通過添加按鈕添加更多鏈接時，只有最後一個鏈接有效（其他人根據開發工具沒有點擊事件偵聽器）。

爲什麼只有最後一個鏈接工作，我怎樣才能使所有鏈接工作？

Answer 1

因爲您將錨標記重新插入到html中。 這個問題類似於Appending HTML string to the DOM。

您可以使用

root.insertAdjacentHTML('beforeend', '<br /><a id= "a_' +cnt + '" href="#">click</a>'); 

，而不是

root.innerHTML += '<br /><a id= "a_' +cnt + '" href="#">click</a>' 

工作撥弄https://jsfiddle.net/0nm4uLvd/

只是爲了提高答案，這裏就是爲什麼當DOM元素被刪除事件偵聽器被刪除的另一個參考= >If a DOM Element is removed, are its listeners also removed from memory? 感謝這些傢伙:)

Answer 2

您正在修改根元素的innerHTML。這將導致完整的「根」在重新創建時被銷燬，因此只有新的事件纔會起作用。

請參閱Manipulating innerHTML removes the event handler of a child element?。

Answer 3

檢查控制檯中的變量cnt。 你沒有張貼整個範圍內，其中函數add被調用，但是我有一個強烈的猜測，這個變量保持始終爲1

而且你的CNT ++

Answer 4

您可以將類設置後寫一個分號你links：class =「some-class」。 然後你可以使用jquery來聽這個類的元素上的點擊事件。

$(document).on('click', '.some-class', function(event) { 
    alert('click:'+$(this).attr('id')); 
}); 

Runnable的例子https://jsfiddle.net/2d99hq1h/1/