addEventListener多個動態生成的元素

-1

要在Chrome應用程序中使用代碼，我需要從onclick切換到addEventListener。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);

來源

2015-09-29 Lutz

當您更改瀏覽器的innerHTML刪除所有子節點，並插入新的兒童無事件偵聽器

來源

2015-09-29 14:16:06

太好了！非常感謝。我查了很多小時的原因。我一直認爲設置事件監聽器將不起作用，否則會被新監聽器覆蓋。但不知道我不得不關心insertHTML。 :) – Lutz

有人傷心這是壞的問題。是嗎？爲什麼？我還沒有找到解決方案，搜索，因爲我沒有看到問題的根源。我會說，這是提出問題的一個很好的理由。 – Lutz

@Lutz也許他們認爲你應該拼寫檢查你的問題標題。 –

addEventListener多個動態生成的元素

回答

相關問題