Js單擊屬性無法處理js加載的html

Question

我創建了一個動態頁面，其中默認情況下爲loadin 10元素。之後，如果用戶滾動doun我正在通過js（通過ajax附加數據）將更多元素添加到此頁面。 並在標籤上的點擊我在做一些JS工作

我使用

$('.atnd_modal').click(function(){ 
alert("dsfds"); 
}); 

不

onclick ="function()" and i dont want to do that onclick. 

問題我面臨着這個js爲第10的結果工作perfectely但之後，它停止工作，我已附加js塊。

如何做到這兩種情況下工作？

Answer 1

嘗試使用jquery on()進行事件委託。它也將在DOM上的動態加載元素上工作。

$('body').on('click','.atnd_modal', function(){ 
    alert("dsfds"); 
}); 

委託的優勢在於他們可以處理來自被添加到該文件在稍後的時間 後代元素活動事件。

點擊事件不工作，因爲當你使用click()它將附加該處理器具有atnd_modal類的所有元素，但是當新的元素加載在DOM不會自動與新元素附加該事件。對於以前的元素，它會正常工作，但對於新的元素則不會。所以這裏來委託事件。我們應重視事件的父元素on()或delegate()

Answer 2

如果您想將事件綁定到你必須使用事件委派動態添加的新元素： -

委託事件有優勢，他們可以處理來自 後代元素的事件，這些元素將在稍後添加到文檔中。通過 挑選一個在連接了委託事件處理程序時保證存在的元素，可以將委派事件用於 ，從而避免需要經常附加和刪除事件處理程序。

更改您這樣的代碼，使用jQuery On

$('body').on('click','.atnd_modal', function(){ 
    alert("dsfds"); 
});