Question

我正在尝试在我的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);
}
}

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

Answer 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

Answer 2

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

Answer 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/

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

3 个答案: