Javascript 用于多个动态生成元素的addEventListener

要在chrome应用程序中使用代码，我需要从

onclick

切换到

addEventListener

我动态地将一些img添加到DOM中。我希望在单击imgBox时执行调整大小功能。使用

onclick

它可以工作。但是使用我的新方法，只有最后添加的imgBox有一个工作的eventlistener。为什么?

function addImgBox (baseImgUrl, id) {

   var imgBoxHtml = "<div id='box-"+id+"'><img id='img-" + id + "' src='" + baseImgUrl + id + ".ipg'></div>"

   document.getElementById("insert-loding-ImgBoxes-here").innerHTML += imgBoxHtml;
   var loadImg = document.getElementById('img-' + id); // catching the new img element

   loadImg.onload = function() {

      ... moving the imgbox to an other place in DOM here ...

      document.getElementById('box-' + id).addEventListener("click", function(event) {
         fullsize(id); 
      },false);

   }
}

addImgBox('image_no_',1);
addImgBox('image_no_',2);
addImgBox('image_no_',3);

函数addImgBox（baseImgUrl，id）{
var imgBoxHtml=“”
document.getElementById（“在此处插入放置imgBox”）.innerHTML+=imgBoxHtml；
var loadImg=document.getElementById（'img-'+id）；//捕获新的img元素
loadImg.onload=函数（）{
…将imgbox移动到DOM中的其他位置。。。
document.getElementById（'box-'+id.）.addEventListener（“单击”），函数（事件）{
全尺寸（id）；
}，假）；
}
}
addImgBox（'图像编号'，1）；
addImgBox（'图像编号'，2）；
addImgBox（'图像编号'，3）；

更改innerHTML浏览器时，将删除所有子节点并插入新的子节点，而不使用事件侦听器

太棒了！非常感谢。我花了好几个小时寻找原因。我一直认为设置事件侦听器将不起作用，或者它将被新的侦听器覆盖。但我不知道我必须关心insertHTML有人说这是个糟糕的问题。它是？为什么？我没有找到解决方案，因为我没有看到问题的根源。我想说，这是问问题的一个很好的理由。@Lutz也许他们认为你应该拼写检查你的问题标题。@torazaburo:如果这是原因，这里有些人疯了。我不是以英语为母语的人。还有打字错误吗？（我仍然更正了：multible）。@Mi-Ke-Bu:我现在已经从insertHTML改为

document.getElementById（“在这里插入寄宿ImgBoxes”）.appendChild（imgBoxHtml）

。使用

createElement

生成

imgBoxHtml

的外部div后。但问题仍然存在！为什么？