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

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操作快得多。