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元素,它的侦听器是否也从内存中删除？ 谢谢这些家伙:)