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’)元素上不再触发它时