无法在 href 标记上定义点击事件答案

【问题标题】：Unable to define a click event on a href tag无法在 href 标记上定义点击事件
【发布时间】：2014-04-11 17:12:35
【问题描述】：

我正在尝试在我的 Tampermonkey 脚本中为锚标记编写点击事件。

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);
}
}

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

【问题讨论】：

标签： javascript html greasemonkey userscripts tampermonkey

【解决方案1】：

这是您添加 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

【讨论】：

这适用于小提琴。但它不在我的 Tampermonkey 脚本中
我不知道tampermonkey是如何工作的，但这应该可以在任何地方工作吗？
这确实在 Tampermonkey 中工作。但是，您应该将 "div" 更改为 "pre" 以匹配 OP 的代码和您的小提琴。
进行了仔细检查。它确实适用于 Tampermonkey。昨天一定错过了什么。谢谢。但还有一件事。在 link.addEventListener 部分中，如果我尝试引用已在 for 循环之外定义的函数，而不是将函数定义为那里的第二个参数，则不会调用该函数。对此有任何指示吗？

【解决方案2】：

应该是contentTag.innerHTML+=("<a id='link1'>Click me</a>");

【讨论】：

我要附加到 innerHTML，所以我必须把所有内容都放在引号中

【解决方案3】：

试试这个：

<script>
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=link"+i+">Click me</a>");
    var link = document.getElementById('link'+i);
    var att=document.createAttribute('onclick');
    att.value="alert('Clicked !')";
    link.setAttributeNode(att);
}
}
</script>

演示：http://jsfiddle.net/TmJ38/

【讨论】：

当 alert 更改为任何实用的 JS 时，这在用户脚本中不起作用。永远不要使用onclick 的规则对于用户脚本来说是三倍的。