JS eventListener点击消失答案

【问题标题】：JS eventListener click disappearingJS eventListener点击消失
【发布时间】：2017-04-23 18:03:26
【问题描述】：

我创建了简单的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++
}

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

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

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

【问题讨论】：

标签： javascript

【解决方案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? 感谢这些人:)

【讨论】：

【解决方案2】：

您可以为您的链接设置一个类：class="some-class"。然后就可以使用jquery来监听这个类的元素的点击事件了。

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

可运行示例https://jsfiddle.net/2d99hq1h/1/

【讨论】：

【解决方案3】：

在控制台中检查您的变量 cnt。您没有发布调用函数 add 的整个上下文，但我强烈猜测此变量始终保持 1。

在你的cnt++后面写一个分号

【讨论】：

添加新链接时会增加，应该有类似 event.target.id 的东西，谢谢。

【解决方案4】：

您正在修改根元素的 innerHTML。这将导致整个“根”被销毁并重新创建，因此只有新事件才会起作用。

见Manipulating innerHTML removes the event handler of a child element?。

【讨论】：