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中重新插入锚标记。问题类似于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元素时删除事件侦听器=＆gt; If a DOM Element is removed, are its listeners also removed from memory? 感谢这些家伙：）

Answer 2

您正在修改根元素的innerHTML。这将导致完整的根源＆＃39;要重新创建，所以只有新事件才能起作用。

请参阅Manipulating innerHTML removes the event handler of a child element?。

Answer 3

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

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

Answer 4

您可以为链接设置课程：class =＆＃34; some-class＆＃34;。然后你可以使用jquery来监听这个类的元素上的click事件。

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

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

JS eventListener点击消失

4 个答案: