JS addeventListener 点击消失

我创建了简单的fidlle https://jsfiddle.net/0nm4uLvd/

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

当添加新链接后单击“添加”按钮，并且单击此链接后会出现警报。

当使用“添加”按钮添加更多链接时，只有最后一个链接有效（根据开发工具，其他链接没有单击事件侦听器）。

为什么只有最后一个链接有效？如何使所有链接都有效？

因为您要在 html 中重新插入锚标记。 问题类似于将 HTML 字符串附加到 DOM https://stackoverflow.com/questions/7327056/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/ https://jsfiddle.net/0nm4uLvd/

只是为了改进答案，这是另一个参考为什么当 dom 元素被删除时事件侦听器被删除=>如果移除 DOM 元素，其侦听器是否也会从内存中移除？ https://stackoverflow.com/questions/12528049/if-a-dom-element-is-removed-are-its-listeners-also-removed-from-memory感谢这些人:)