jQuery.one()和jQuery.on()之间的区别

我的页面上有多个图像。 为了检测损坏的图像,我在SO上使用了这个。

$('.imgRot').one('error',function(){ $(this).attr('src','broken.png'); }); 

这在我理解的第一张图片上工作正常。 但是,当我改变它

 $('.imgRot').on('error',function(){ $(this).attr('src','broken.png'); }); 

它不适用于任何图像。 有人能告诉我为什么吗?

社区维基:这个通用答案对OP发布的问题没有贡献,但与标题有关。

one()on()的概念可以用下面的代码解释。

one()函数自动移动到off状态。

on()与one()相同但需要手动设置为off状态,否则实例数没有限制。

 var i = 1; $('.one').one('click', function() { $(this).text('I am clickable only once: ' + i); i++; }); var j = 1; $('.multiple').on('click', function() { $(this).text('I was clicked ' + j + ' times'); j++; }); 
  
Click me
Click me

如果你在jQuery 1.7中查看.one()的源代码,它只是在内部调用.on()除了事件触发后它会删除事件处理程序。 所以,你的情况应该没有区别,因为error是一个事件,每个对象应该只发生一次。

所以,你的代码中肯定会发生其他事情,比如当你运行这段代码或类似代码时,图像对象还没有被加载到DOM中。

如果您尝试使用委托事件处理来执行此操作(您的示例未显示),则可能会遇到“错误”事件未传播的问题。

由于缓存,您的代码也可能存在时序问题。 尝试在已经存在于DOM中的图像上安装这些类型的error handling程序是一种竞争条件。 您试图在调用之前安装error handling程序,但是图像已经开始加载,并且在安装事件处理程序之前可能已经触发了事件。 后续页面加载(在第一个页面之后)可能已缓存其他页面元素或DNS引用,因此它可能更快地到达error handling程序,甚至可能在JS运行并安装error handling程序之前。

我知道这是浏览器缓存和onload事件的问题。 如果您在嵌入式HTML中附加事件处理程序,则只能可靠地获取onload事件(因此,当首次解析标记或者在设置.src属性之前附加它时,它.src存在(如果创建图像)以编程方式)。这表明你不能像对页面HTML中的图像那样可靠地设置error处理程序。

我的建议是这样的:

  • 在图像在DOM中之后,不要尝试安装这样的error handling程序。
  • 如果以编程方式生成图像来分配它们,则在分配.src之前分配事件处理程序。
  • 如果您需要在页面的HTML中使用这些图像,那么您必须将事件处理程序放在HTML中,例如因为这是保证这一点的唯一方法在事件发生之前安装处理程序。

jQuery将为“one”重用“on”方法。 以下是jQuery的内部代码,他们将硬编码值“1”传递给jQuery.on()函数。他们将使用jQuery.off()在元素上进一步关闭触发事件

  on:function( types, selector, data, fn, one ) { if ( one === 1 ) { origFn = fn; fn = function( event ) { jQuery().off( event ); return origFn.apply( this, arguments ); }; } off:function(types, selector, data, fn){ on(types, selector, data, fn, 1); } 

因此,在您的情况下,“错误”是在第一个图像上触发的事件类型,并且当调用此事件的jQuery.one()方法被关闭,然后在$(’。imgRot’)元素上不再触发它时