JS eventListener點擊消失

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++
}

添加新鏈接后單擊“添加”按鈕，單擊此鏈接后會出現警報。

當使用“添加”按鈕添加更多鏈接時，只有最后一個鏈接有效（其他鏈接根據開發工具沒有單擊事件偵聽器）。

為什么只有最后一個鏈接工作，如何使所有鏈接工作？

Answer 1

因為您要在html中重新插入錨標記。 問題類似於將HTML字符串附加到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元素時刪除事件偵聽器=> 如果刪除了DOM元素，它的偵聽器是否也從內存中刪除？ 謝謝這些家伙:)

Answer 2

您正在修改根元素的innerHTML。 這將導致重新創建完整的“root”，因此只有新事件才有效。

請參閱操作innerHTML刪除子元素的事件處理程序？ 。

Answer 3

在控制台中檢查您的變量cnt。 您沒有發布調用函數add的整個上下文，但我強烈猜測此變量始終為1。

並在你的cnt ++之后寫一個分號

Answer 4

您可以為鏈接設置一個類：class =“some-class”。 然后，您可以使用jquery來偵聽此類元素的click事件。

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

Runnable示例https://jsfiddle.net/2d99hq1h/1/