javascript - 无法在href标记上定义click事件

我试图在我的tampermonkey脚本中为锚标签编写click事件。

var contentTag = document.getElementsByTagName("pre")[0];
var fileContents = contentTag.innerHTML;

contentTag.innerHTML = "";

var lines = fileContents.split("\n");
window.alert("Number of lines:"+lines.length);


for(var i=0; i<20; i++) {
if(i!==15)
 contentTag.innerHTML+=(lines[i]+"<br>");
else {
    contentTag.innerHTML+=("<a id=link1>Click me</a>");
    var link = document.getElementById('link1');
    link.addEventListener("click", function() {
        window.alert('I am clicked');
    }, false);
}
}

当我单击显示的页面中的链接时，即使定义了单击事件侦听器，也永远不会触发警报消息。我在这里做错了什么？

最佳答案

这是添加HTML的方式，在下一次迭代中重新添加链接。

link.innerHTML += something

因此，事件处理程序丢失了，您实际上可以通过将事件处理程序添加到最后一个元素来prove that。
如果您以正确的方式进行操作，创建元素并追加元素，则效果很好

var contentTag = document.getElementsByTagName("pre")[0];
var fileContents = contentTag.innerHTML;

contentTag.innerHTML = "";
var lines = fileContents.split("\n");

for (var i = 0; i < 20; i++) {
    if (i !== 15) {
        var txt = document.createTextNode(lines[i] || ''),
            br  = document.createElement('br');
        contentTag.appendChild(txt);
        contentTag.appendChild(br);
    } else {
        var link = document.createElement('a');
        link.id = 'link1';
        link.innerHTML = 'Click me';
        link.addEventListener("click", function () {
            alert('clicked')
        }, false);

        contentTag.appendChild(link)

    }
}

FIDDLE

关于javascript - 无法在href标记上定义click事件，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/23018700/