纯JavaScript添加监听器来加载

Question

我想主意关于通过AJAX添加监听到新元素新元素：

例如，现在我有

<a href="#">hello world</a> 

我添加了一个侦听器，以每<a>，但是当我通过AJAX加载新元素，它没有监听器;我不完全确定问题可能是什么。

它是否在加载新元素时不调用函数并为所有元素添加侦听器？

我知道，在jQuery中，我们可以使用$("class").on()，但我该如何使用纯JavaScript？

Answer 1

只需在添加新元素后立即将新侦听器添加到ajax成功回调中的动态添加元素中，或者使用事件代理即可将事件侦听器附加到将监视其动态事件的静态祖先节点孩子：

1.Attach新的监听器后

AJAX版本

var options = { 
    type: "POST", 
    url: "someurl", 
    data: "some arguments", 
    success: function (response) { 
     //... add the new elements here... 
     //... 
     //attach event handlers here 
     var myElement=document.getElementById("myDynamicElement"); 
     myElement.addEventListener("click",function(){ 
      this.style["border"]="5px solid red"; 
     }); 
    } 
}; 
$.ajax(options); 

2.事件代表团版本

var myContainer = document.querySelectorAll(".container")[0]; 
 
myContainer.addEventListener("click", function (ev) { 
 
    event = event || window.event; 
 
    var target = event.target || event.srcElement; 
 
    while (target != myContainer) { 
 
     var selector = ".myDynamicElement"; 
 
     var className = " " + selector + " "; 
 
     if ((" " + target.className + " ").replace(/[\n\t]/g, " ").indexOf(" myDynamicElement ") > -1) { 
 
      alert("test"); 
 
     } 
 
     target = target.parentNode; 
 
    } 
 
});

.container { 
 
    display:block; 
 
    width:200px; 
 
    height:200px; 
 
    border:1px solid black; 
 
}

<div class="container"> 
 
    <button class="myDynamicElement">New Button</button> 
 
</div>