Question

我有一个脚本可以向页面添加一些文字，如下所示：

document.body.innerHTML += '<input type="image" id="alertMeID" style="position:fixed;top:0;left:0" //src="http://i55.tinypic.com/2nly5wz.gif" ///>';
document.body.innerHTML += '<input type="image" id="alertMeID2" style="position:fixed;top:100;left:100" //src="http://i55.tinypic.com/2nly5wz.gif" />';
document.getElementById('alertMeID').addEventListener('click', function(){do_this("some text")}, false);
document.getElementById('alertMeID2').addEventListener('click', function(){do_this("another text")}, false);

function do_this(sendingParameter){document.body.innerHTML += sendingParameter;}

我第一次点击其中一张图片时效果正常。但是，如果我第二次点击，它根本不起作用。

如何解决这个问题？

Answer 1

当您使用innerHTML时，元素的内容会被重新分析。删除并重新创建元素，然后删除事件处理程序。更好的方法是使用DOM操作。

function do_this(sendingParameter){
    document.body.appendChild(document.createTextNode(sendingParameter));
}

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

Answer 2

您可能还想查看：insertAdjacentHTML

它指出mdn：

insertAdjacentHTML（）将指定的文本解析为HTML或XML，并将生成的节点插入到指定位置的DOM树中。它不会重新解析它正在使用的元素，因此它不会破坏该元素内的现有元素。这避免了序列化的额外步骤，使其比直接innerHTML操作快得多。

带参数和innerHTML的事件监听器只能工作一次

2 个答案: