javascript - 带有参数和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/