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-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()在某些情况下导致性能问题的原因:

jQuery.on()是否适用于在创建事件处理程序后添加的元素？

jQuery的新on()方法如何与性能中的live()方法进行比较？

jQuery.bind()和jQuery.on()之间有什么区别？

jQuery .live()vs .on()方法,用于在加载动态html后添加click事件

为什么不把Javascript事件委托带到极致？

简而言之:

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

功能相当于:

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

两个主要缺点.live()是:

1. 它".item"立即评估选择器,这是纯粹浪费的循环,因为根本没有使用结果.

2. .live()是硬连线到文档对象.它使用委托事件处理来处理来来往往的对象,但所有.live()事件处理程序都分配给文档对象.如果你有很多它们,它可能是一个很大的性能瓶颈,因为每个冒泡到文档的事件都必须针对所有.live()事件处理程序的选择器进行评估. .on()另一方面,不仅可以绑定到文档对象,还可以绑定到更接近事件实际原点的祖先,并且当有许多委托事件处理程序时,查找它的效率可能更高.更接近的事件,以便只通过.on()选择器处理接近对象的事件,从而提高性能.例如,上面的处理程序可以像这样完成:

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

where #container是动态.item对象的父级.