Javascript JS eventListener单击消失

我创造了简单的

var cnt=1；
函数add（）{
var root=document.getElementById（'根'）
root.innerHTML+='
'
var a=document.getElementById（“a_u3;”+cnt）
a、 addEventListener（'click'，函数（事件）{
警报（'click:a_'+cnt）
})
碳纳米管++
}

添加新链接后单击“添加”按钮时，单击此链接后，将显示警报

当使用Add按钮添加更多链接时，只有最后一个链接起作用（根据devel工具，其他链接没有click事件侦听器）

---

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

您正在修改根元素的innerHTML。这将导致在重新创建时销毁完整的“根”，因此只有新事件才能工作

---

请参阅。

，因为您要在html中重新插入锚定标记。 问题类似于

你可以用

root.insertAdjacentHTML( 'beforeend', '<br /><a id= "a_' +cnt + '" href="#">click</a>');

root.insertAdjacentHTML（'beforeend'，'
'）；

而不是

root.innerHTML += '<br /><a id= "a_' +cnt + '" href="#">click</a>'

root.innerHTML+='

工作小提琴

为了改进答案，这里有另一个参考，说明删除dom元素时为什么会删除事件侦听器=>

---

感谢这些家伙：）

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

---

在你的cnt++后面写一个分号，你可以为你的链接设置一个类：class=“some class”。 然后，您可以使用jquery来侦听此类元素上的单击事件

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

---

可运行示例

当添加新链接时，它会增加，应该有类似event.target.id的内容，谢谢。

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