Question

我有一些代码来添加一些HTML并将它们附加到一个侦听器，奇怪的是，当我向页面添加更多内容时，以前添加的元素的事件监听器不起作用。

JS：

(function() {
    document.body.innerHTML = "<div class=\"container\"></div>";

    document.querySelector(".container").innerHTML += "<p class=\"red\">RED</p>";                             
    document.querySelector(".red").addEventListener("click", function() {
        console.log("red");
    });

    document.querySelector(".container").innerHTML += "<p class=\"purple\">PURPLE</p>";                           
    document.querySelector(".purple").addEventListener("click", function() {
        console.log("purple");
    });

    document.querySelector(".container").innerHTML += "<p class=\"blue\">BLUE</p>";                           
    document.querySelector(".blue").addEventListener("click", function() {
        console.log("blue");
    });
})();

Answer 1

修改innerHTML将破坏并重建容器的所有后代元素。绑定到任何销毁元素的事件处理程序在过程中都会丢失，并且需要时需要重新附加。请使用.insertAdjacentHTML方法。

Answer 2

问题是innerHTML重建了完整的 HTML ，因此所有后代元素的事件都丢失了。您可以改用Element.insertAdjacentHTML()：

insertAdjacentHTML()方法将指定的文本解析为HTML或XML，并将结果节点插入到DOM树中的指定位置。它不会重新解析正在使用该元素的元素，因此不会破坏该元素内部的现有元素。这避免了额外的序列化步骤，使其比直接innerHTML操纵要快得多。

(function() {
    document.body.innerHTML = "<div class=\"container\"></div>";

    document.querySelector(".container").innerHTML += "<p class=\"red\">RED</p>";                             
    document.querySelector(".red").addEventListener("click", function() {
        console.log("red");
    });

    document.querySelector(".container").insertAdjacentHTML("beforeend", "<p class=\"purple\">PURPLE</p>");                           
    document.querySelector(".purple").addEventListener("click", function() {
        console.log("purple");
    });

    document.querySelector(".container").insertAdjacentHTML("beforeend", "<p class=\"blue\">BLUE</p>");                           
    document.querySelector(".blue").addEventListener("click", function() {
        console.log("blue");
    });
})();

Answer 3

当您调整innerHTML时，整个元素将被重建（并且所有附加的侦听器将在此过程中丢失），因此您必须在调整后添加侦听器：

(function() {
    document.body.innerHTML = "<div class=\"container\"></div>";

    document.querySelector(".container").innerHTML += "<p class=\"red\">RED</p>";
    document.querySelector(".container").innerHTML += "<p class=\"blue\">BLUE</p>";    
    document.querySelector(".container").innerHTML += "<p class=\"purple\">PURPLE</p>";                           

    document.querySelector(".red").addEventListener("click", function() {
        console.log("red");
    });

    document.querySelector(".purple").addEventListener("click", function() {
        console.log("purple");
    });

    document.querySelector(".blue").addEventListener("click", function() {
        console.log("blue");
    });
})();

注入新的HTML会删除以前附加的侦听器

3 个答案: