純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>