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-update将触发请求，响应将是

警报更新

我会将其插入parent()。然后再次按alert-link将导致重定向到/，但如果我将.on()更改为.live()，则会再次显示警报。我在这里错过了什么？我已经读过.on()替换.delegate()和.live()。

Answer 1

您转换为.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()的两个主要缺点是：

它立即评估选择器".item"，这是纯粹浪费的周期，因为根本没有使用结果。
.live()与文档对象硬连线。它使用委托事件处理来处理来来往往的对象，但所有.live()事件处理程序都分配给文档对象。如果你有很多它们，那么它可能是一个很大的性能瓶颈，因为每个冒泡到文档的事件都必须针对所有.live()事件处理程序的选择器进行评估。另一方面，.on()不仅可以绑定到文档对象，还可以绑定到更接近事件实际起源的祖先，当有很多委托事件处理程序时，它可以是很多更有效地找到更接近的事件，以便只通过.on()选择器处理接近对象的事件，从而提高性能。例如，上面的处理程序可以像这样完成：
```
$("#container").on('click', '.item', fn);
```

其中#container是动态.item对象的父级。

Answer 2

.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;
});

之所以改变了，因为将委托处理程序附加到更加本地化的容器元素比将旧处理程序附加到DOM根目录的旧.live样式更有效。

换句话说，即使alert-link元素只显示在a div内，.live，jQuery也会监听每一次点击事件在页面上并将其与委派的选择器进行比较。通过更有针对性，jQuery只需处理a中的元素点击。

Answer 3

它确实是.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。

jquery：on vs live

3 个答案: