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对象的父对象。