功能不能正常工作

Question

可能重複：
jquery bind functions and triggers after ajax call

$('.chatr').mouseover(function() { 
    $('#'+this.id+" .action").removeClass('dn'); 
    }); 

起步控制功能時，頁面加載，但是當新的內容通過AJAX加載的功能新的div無法正常工作

Answer 1

這是因爲事件在頁面加載時被掛鉤。在加載後附加了特定的.chatr元素，因此您必須使用所謂的委託事件處理程序。試試這個：

$(document).on('mouseover', '.chatr', function() { 
    $('#' + this.id + " .action").removeClass('dn'); 
}); 

請注意，您應該更換document有哪些內容正在被附加到最接近的靜態父元素。

Answer 2

jQuery事件處理程序僅綁定到執行代碼時存在的元素。在代碼執行後添加的元素不會自動綁定事件處理程序，即使它們符合選擇器的條件。解決的辦法是event delegation：

$(document).on('click', '.chatr', function(e) { 
    $('#'+this.id+" .action").removeClass('dn'); 
}); 

理想情況下，你會打電話對.on()功能（和事件處理程序綁定到）最近的靜態祖先元素（即一個將永遠存在，永遠包含你想要的元素觸發事件），而不是document。沒有看到HTML，就不可能知道應該通過哪個元素。

Answer 3

你需要使用一個委託：

$(document).on('mouseover', '.chatr', function() { 
    $(this).find('.action').removeClass('dn'); 
}); 

但是，如果你有一個容器，用於所有.chatr元素使用容器的ID，而不是document。

Answer 4

這不會在動態創建的元素上工作，因爲事件處理程序bindig在初始頁面加載後被刪除\未設置爲新添加的元素。

你可以做的是事件偵聽器添加到「.chatr」 DIV父元素，並通過 $（event.target）.hasclass（‘chatr將’）檢查，以確定是否應該事件觸發