Javascript:如何将相同的事件监听器重新附加到重新复制的元素上?

时间:2017-12-25 18:10:25

标签: javascript addeventlistener

在我的代码中,我有一个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>';   
}

问题:

当我通过点击&#34消除h1元素时,删除H1&#34;按钮然后再次出现h1元素,点击&#34;插入H1&#34;按钮,然后我点击h1元素, h1.addEventListerner在代码中没有效果,没有触发警报

那么当这个h1元素重新出现时,如何将相同的事件监听器重新附加到h1元素呢?

谢谢。

2 个答案:

答案 0 :(得分:3)

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

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

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

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

In jQuery, how to attach events to dynamic html elements?

答案 1 :(得分:0)

如同Jozef Cipa's answer所建议的那样,事件委派可能是您尝试完成任务的最佳方法。没有充分的理由去做别的事情,那就是要走的路。

也就是说,也可以使用Mutation Observer检测从页面添加/删除的元素,并动态添加事件处理程序。

var container_h1 = document.getElementById("container_h1"); 

function remove_h1(){
    container_h1.innerHTML = "";    
}

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


let h1ClickHandler = function(evt) {
    alert(evt.target.innerHTML);
  },
  addH1ClickHandler = function (nodes) {
    nodes.forEach(function (node) {
      node.addEventListener("click", h1ClickHandler, false);
    });
  },
  h1Added = function(mutationsList) {
    for(var mutation of mutationsList) {
        if (mutation.type == 'childList' && mutation.addedNodes.length > 0) {
          addH1ClickHandler(mutation.addedNodes);
        }
    }
  };

// add click handlers to any existing h1 tags on load
addH1ClickHandler(container_h1.querySelectorAll('h1'));

// start observing for new h1 tags being added
var observer = new MutationObserver(h1Added);
observer.observe(container_h1, {
  childList: true
});
<input type="button" value="remove H1" onclick="remove_h1();">
<input type="button" value="insert H1" onclick="insert_h1();">

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