jquery：on vs live

Question

我很好奇爲什麼當我將.live()替換爲.on()我的事件在通過html()方法插入AJAX的響應後無法工作。假設我有HTML結構：

<div class="a"> 
    <a href="" class="alert-link">alert</a> 
    <a href="" class="ajax-update">update</a> 
</div> 

和jQuery代碼是這樣的：

$('.alert-link').on("click", function(){ 
alert('abc'); 
return false; 
}); 

和Ajax的更新將觸發請求，這反應會

警報 更新

和我會將其插入parent()。然後再次按alert-link將導致重定向到/，但如果我將.on()更改爲.live()，則會再次顯示警報。我在這裏錯過了什麼？我讀過.on()是替代.delegate()和.live()。

Answer 1

.on合併並取代.bind，.live和.delegate。語法$('selector').on('event', callback)是bind的道德等價物，而不是live。

過濾選擇您的來電添加到on：

$('container').on('click', 'child-filter', callback); 

在這種情況下，

$('.a').on("click", ".alert-link", function(){ 
    alert('abc'); 
    return false; 
}); 

這是改變，因爲它是更有效的委託處理程序附加到一個更加本地化的容器元素比舊的.live風格的處理程序附加到DOM的根。

換句話說，即使alert-link元素只會出現一個小adiv的內部，.live，jQuery的聽頁面上的每一個點擊事件，並比較其委派的選擇。通過更有針對性，jQuery只需處理a內的元素點擊。

Answer 2

這確實是.delegate和.live的替代品，但你有一些額外的參數傳遞：

var container = $('.a').on('click', '.alert-link', function() { 
    alert('abc'); 
    return false; 
}).on('click', '.ajax-update', function() { 
    // something that uses AJAX to update .a, like: 
    container.load('some-url'); 
    return false; 
}); 

欲瞭解更多信息，see the documentation。

Answer 3

由於您使用的是靜態形式.on()而不是動態形式.on()，因此您的特定轉換爲.on()無法正常工作。取而代之的是靜態形式：

$('.alert-link').on("click", function(){ 

您需要使用動態的形式是這樣的：

$(someStaticParentObject).on("click", '.alert-link', function(){ 

這將事件處理程序綁定到someStaticParentObject，然後使用委派事件處理源於任何子事件在與選擇器'.alert-link'匹配的項目上。您的版本立即綁定到您安裝事件處理程序（靜態綁定）時存在的任何'.alert-link'項目，並且沒有使用委派的事件處理來處理尚未創建的對象的事件。

看到這些以前的答案爲.live()對比.on()很好地解釋，爲什麼.live()可能導致性能問題在某些情況下：

Does jQuery.on() work for elements that are added after the event handler is created?

How does jQuery's new on() method compare to the live() method in performance?

What's the difference between jQuery.bind() and jQuery.on()?

jQuery .live() vs .on() method for adding a click event after loading dynamic html

Why not take Javascript event delegation to the extreme?

簡而言之：

$(".item").live('click', fn); 

是功能等效於：

$(document).on('click', '.item', fn); 

的.live()的兩個主要缺點是：

1. 它立即評估選擇".item"哪一個純粹是浪費週期，因爲結果根本不用。

2. .live()被硬連線到文檔對象。它使用委託事件處理來處理來來去去的對象，但所有的事件處理程序都被分配給文檔對象。如果你有很多它們，它可能會是一個巨大的性能瓶頸，因爲每個事件都需要根據所有事件處理程序的選擇器進行評估。另一方面，.on()不僅可以綁定到文檔對象，還可以綁定到更接近事件的實際起源的祖先，並且當有大量的委託事件處理程序時，它可以是更有效的找到事件更接近，因此只有靠近對象的事件纔會通過.on()選擇器進行處理，從而提高性能。例如，上述處理程序可以做這樣的：

   $("#container").on('click', '.item', fn); 
   

其中#container是動態.item對象的父對象。