純JavaScript添加監聽器來加載

我想主意關於通過AJAX添加監聽到新元素新元素：純JavaScript添加監聽器來加載

例如，現在我有

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

我添加了一個偵聽器，以每<a>，但是當我通過AJAX加載新元素，它沒有監聽器;我不完全確定問題可能是什麼。

它是否在加載新元素時不調用函數併爲所有元素添加偵聽器？

我知道，在jQuery中，我們可以使用$("class").on()，但我該如何使用純JavaScript？

來源

2015-02-07 medo zeus

它沒有顯示在我的問題A HREF – 2015-02-07 19:20:42

你需要新的聽衆附加到新的元素，或使用事件委派 – Banana 2015-02-07 19:27:48

當你追加他們沒有事件處理程序連接到新的鏈接他們。在這種情況下，您可以再次將事件綁定到它或使用事件委派。 – dfsq 2015-02-07 19:28:54

只需在添加新元素後立即將新偵聽器添加到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>

來源

2015-02-07 19:59:56 Banana

感謝我輸入反應找到了答案在這裏:) http://stackoverflow.com/questions/11179841/addeventlistener-for-new-elements – 2015-02-07 20:09:44

純JavaScript添加監聽器來加載

回答

相關問題