Question

要在Chrome应用中使用代码，我需要从onclick切换到addEventListener。

我动态地向DOM添加了一些img。我想在点击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);

Answer 1

当您更改innerHTML浏览器时，删除所有子节点并插入没有事件侦听器的新子节点

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

1 个答案: