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

Question

为了在 chrome 应用程序中使用代码，我需要从 onclick 切换到 addEventListener。

我动态添加了一些 img 到 DOM。我想在单击 imgBox 时执行调整大小功能。使用 onclick 它有效。但是用我的新方法只有最后添加的 imgBox 有一个有效的事件监听器。为什么？

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 用于多个动态生成的元素

addEventListener for multiple dynamic generated elements

javascript

dom

dynamic

onload

addeventlistener