jQuery中的bind和live方法有什么区别?
我很想知道bind和live函数之间的区别。
对我来说,他们似乎是几乎相同的。
我读过live / bind方法的好处 ,但没有告诉我差异
谢谢!
.bind()将事件附加到存在的元素,或者在调用时匹配select器。 之后创build的任何元素或者由于类更改而向前匹配的元素都不会触发绑定的事件。
.live()适用于现有和未来的匹配元素。 在jQuery 1.4之前,这仅限于以下事件:click,dblclick mousedown,mouseup,mousemove,mouseover,mouseout,keydown,keypress,keyup
总之: .bind()
只适用于你当前在jQuery对象中select的项目。 .live()
将适用于所有当前的匹配元素,以及将来可能添加的任何元素。
它们之间的根本区别是live()
使用事件冒泡 。 也就是说,当你点击一个button时,该button可能存在于<p>
, <div>
, <body>
元素中。 所以实际上,你实际上是在同一时间点击所有这些元素。
live()
通过将你的事件处理程序附加到文档而不是元素来工作 。 当您单击该button时,如前所述,文档将收到相同的点击事件。 然后查找事件所针对的元素行,并检查它们是否符合您的查询。
其结果是双重的:首先,这意味着你不必继续将事件重新应用于新的元素,因为事件发生时它们将被隐式地添加。 然而,更重要的是(取决于你的情况),这意味着你的代码要轻得多! 如果您在页面上有50个<img>
标签并且运行以下代码:
$('img').click(function() { /* doSomething */ });
那么这个函数被复制到每个元素中。 但是,如果你有这样的代码:
$('img').live('click', function() { /* doSomething */ });
…那么这个函数只存储在一个地方(在文档上),并且在事件时间被应用到与你的查询匹配的任何地方。
由于这种冒泡的行为,并不是所有的事情都可以这样处理。 Ichiban指出,这些支持的事件是click,dblclick mousedown,mouseup,mousemove,mouseover,mouseout,keydown,keypress,keyup。
绑定会将事件绑定到指定的模式,对于当前DOM中的所有匹配,在您调用它时。 Live会将事件绑定到当前DOM的指定模式以及DOM中的未来匹配,即使它发生更改。
例如,如果绑定$(“div”)。bind(“hover”,…),它将适用于DOM中的所有“div”。 如果您然后操纵DOM并添加一个额外的“div”,它将不会有hover事件绑定。 使用live而不是bind会将事件分派给新的div。
尼斯阅读这个: http : //www.alfajango.com/blog/the-difference-between-jquerys-bind-live-and-delegate/
现在(因为jQuery 1.7)不赞成使用.on()函数 – http://api.jquery.com/on/
想象这个场景:
- 我有几个
<img>
元素。-
$('img').bind('click', function(){...});
- 添加一些额外的图像(使用
get()
或html()
,任何东西) - 新的图像没有任何约束!
-
当然,因为当你在第2步执行$('img')...
时,新图像不存在,所以它没有将事件处理程序绑定到它们。
现在,如果你这样做:
- 我有几个
<img>
元素。-
$('img').live('click', function(){...});
- 添加一些额外的图像(使用
get()
或html()
,任何东西) - 新的图像确实有约束力!
-
魔法? 只是一点点。 实际上,jQuery将一个通用事件处理程序绑定到DOM树中更高的另一个元素(body?document?no idea),并让事件冒泡。 当它到达generics处理程序时,会检查它是否与您的live()
事件相匹配,如果是,则会被触发,无论该元素是在live()
调用之前还是之后创build的。
除了他们所说的话之外,我认为最好是尽可能地坚持在任何时候/任何地方bind
,只有在必要时才能使用live
。
所有这些jQuery方法都用于将事件附加到select器或元素。 但他们都是彼此不同的。
.bind():这是绑定事件的最简单快捷的方法。 但是bind()的问题在于,对于与相同的select器匹配的dynamic添加的元素,它不起作用。 bind()只将事件附加到当前元素而不是未来元素。 在处理大量select时,还会遇到性能问题。
.live():这个方法克服了bind()的缺点。 它适用于dynamic添加的元素或未来的元素。 由于在大页面上性能差,这个方法在jQuery 1.7中已经被弃用了,你应该停止使用它。 使用此方法链接不正确支持。
在这里了解更多
我想补充一点,因为我自己的傻气debugging了一下。 我将.live()应用于我的页面上的一个button类,假设它只是渲染出正确的ID我试图传递查询string,并做我想做的事与Ajax调用。 我的应用程序已dynamic添加与库存项目相关联的button。 例如,深入分类到“焦炭”button添加一个可口可乐订单。 再次从顶部钻取,并添加“BUDLITE” – 每次我想通过AJAX调用将这些项目input到表格中。
但是 ,由于我将.live()绑定到整个button类,它会记住我所做的每个ajax调用,并为每个后续button重新启动它。 这有点棘手,因为我不清楚绑定和生活之间的区别(上面的答案是水晶的),所以我想我会把这个放在这里以防万一有人在这个东西上search。
有一种方法来获得生活的效果,但它的一种讨厌。
$(this).unbind('mouseout')。bind('mouseout',function(){});
这将清除以前的和重置新的。 对我来说,它似乎一直工作良好。
在这里讨论 live和livequery之间的区别。