Javascript：如何将相同的事件侦听器重新附加到重复出现的元素？

Question

在我的代码中，我有一个 h1 容器，里面有 h1 元素，如下所示：

<div id="container_h1"><h1 id="h1">Title H1</h1></div>

然后，我将一个事件侦听器附加到 h1 元素，以便在用户单击 h1 元素时提醒 h1 文本：

var h1 = document.getElementById("h1");
h1.addEventListener(
                        "click", 

                        function()
                        {
                            alert(h1.innerHTML);
                        },

                        false                       
                    );

然后，我有 2 个用于删除和插入 h1 元素的按钮，如下所示：

<input type="button" value="remove H1" onclick="remove_h1();">
<input type="button" value="insert H1" onclick="insert_h1();">

//container_h1 element :
var container_h1 = document.getElementById("container_h1"); 

//Remove h1 :
function remove_h1()
{
    container_h1.innerHTML = "";    
}

//Re-appear h1 :
function insert_h1()
{
    container_h1.innerHTML = '<h1 id="h1">Title H1</h1>';   
}

问题 ：

当我通过单击“删除 H1”按钮使 h1 元素消失，然后通过单击“插入 H1”按钮使 h1 元素重新出现，然后单击 h1 元素，代码中的 h1.addEventListerner 没有任何效果，不会触发警报。

那么，当 h1 元素重新出现时，如何将相同的事件侦听器重新附加到 h1 元素呢？

谢谢。

Answer 1

而不是h1.addEventListener(...)添加

document.body.addEventListener('click', function(element) {
    if (element.target.nodeName == 'H1') {
        // your code
    }
})

因此，您将事件侦听器绑定到body而不是h1. 问题是 yourh1.addEventListener(...)只应用于当前 DOM 中现有的元素<h1>，而不应用于动态创建的元素。

http://www.theappguruz.com/blog/dynamic-event-binding-demo-jquery

在 jQuery 中，如何将事件附加到动态 html 元素？