jQuery中的bind和live方法有什么区别?

时间:2009-06-01 22:05:34

标签: jquery bind live

我很想知道bind和live函数之间的区别。

对我而言,他们似乎几乎完全相同。

我读过the benefits of live/bind methods,但它并没有告诉我差异......

谢谢!

10 个答案:

答案 0 :(得分:89)

简而言之:.bind()仅适用于您当前在jQuery对象中选择的项目。 .live()将适用于所有当前匹配的元素,以及您将来可能添加的任何元素。

它们之间的根本区别在于live()使用了event bubbling。也就是说,当您点击某个按钮时,该按钮可能位于<p><div><body>元素中;所以实际上,你实际上是在同时点击所有这些元素。

live()的工作原理是将您的事件处理程序附加到文档,而不是元素。当您单击该按钮时,如前所示,文档将收到相同的单击事件。然后它会查找事件所针对的元素行,并检查它们是否与您的查询匹配。

这样做的结果有两个:首先,它意味着您不必继续将事件重新应用于新元素,因为它们将在事件发生时隐式添加。但是,更重要的是(取决于您的情况),这意味着您的代码更轻松!如果页面上有50个<img>标记,则运行此代码:

$('img').click(function() { /* doSomething */ });

...然后该功能被复制到每个元素中。但是,如果你有这个代码:

$('img').live('click', function() { /* doSomething */ });

...然后该函数仅存储在一个位置(在文档上),并应用于您在事件时查询的任何内容。

由于这种冒泡行为,并非所有事件都可以通过这种方式处理。正如Ichiban所指出的,这些支持的事件包括click,dblclick mousedown,mouseup,mousemove,mouseover,mouseout,keydown,keypress,keyup。

答案 1 :(得分:77)

.bind()将事件附加到在调用时存在或匹配选择器的元素。之后创建的任何元素或因为类被更改而前进的元素都不会触发绑定事件。

.live()适用于现有和未来的匹配元素。在jQuery 1.4之前,这仅限于以下事件:click,dblclick mousedown,mouseup,mousemove,mouseover,mouseout,keydown,keypress,keyup

答案 2 :(得分:5)

绑定会将事件绑定到指定的模式,以便在调用时将当前DOM中的所有匹配项绑定。 Live会将事件绑定到当前DOM的指定模式以及DOM中的未来匹配,即使它发生更改。

例如,如果绑定$(“div”)。bind(“hover”,...),它将适用于DOM中的所有“div”。如果你然后操纵DOM并添加一个额外的“div”,它就不会绑定那个悬停事件。使用live而不是bind也会将事件分派给新的div。

答案 3 :(得分:5)

很好地阅读:http://www.alfajango.com/blog/the-difference-between-jquerys-bind-live-and-delegate/

现在(因为jQuery 1.7)使用.on()函数弃用了 - http://api.jquery.com/on/

答案 4 :(得分:4)

想象一下这种情况:

  1. 我有几个<img>元素。
    • $('img').bind('click', function(){...});
    • 添加一些额外的图片(使用get()html(),任何内容)
    • 新图片没有任何约束!!
  2. 当然,由于在步骤2中执行$('img')...时新图像不存在,因此它没有将事件处理程序绑定到它们。

    现在,如果你这样做:

    1. 我有几个<img>元素。
      • $('img').live('click', function(){...});
      • 添加一些额外的图片(使用get()html(),任何内容)
      • 新图片有绑定!!
    2. 魔法?只是一点点。事实上,jQuery将一个通用事件处理程序绑定到DOM树中更高的另一个元素(正文?文档?不知道),并让事件冒出来。当它到达通用处理程序时,它会检查它是否与您的live()事件匹配,如果是,它们会被触发,无论该元素是在live()调用之前还是之后创建的。

答案 5 :(得分:3)

除了他们所说的内容之外,我认为最好尽可能地坚持bind,并且只在必要时使用live

答案 6 :(得分:1)

所有这些jQuery方法都用于将事件附加到选择器或元素。但它们彼此不同。

.bind():这是绑定事件的最简单快捷的方法。但是bind()的问题在于它不适用于动态添加的匹配相同选择器的元素。 bind()只将事件附加到当前元素而不是将来的元素。除此之外,在处理大量选择时,它也存在性能问题。

.live():此方法克服了bind()的缺点。它适用于动态添加的元素或未来的元素。由于它在大页面上的性能很差,因此从jQuery 1.7开始不推荐使用此方法,您应该停止使用它。使用此方法不能正确支持链接。

了解更多here

答案 7 :(得分:0)

由于我自己的愚蠢,我想在调试之后再加上这个。我将.live()应用到我页面上的一个按钮类,假设它只是渲染出我试图传递查询字符串的正确ID并执行我想要用ajax调用做的事情。我的应用程序动态添加了与库存项目关联的按钮。例如,向下钻取“COKE”按钮以向您的订单添加焦炭。再次从顶部向下钻取,并添加'BUDLITE' - 每次我希望通过AJAX调用将这些项目输入到表格中。

然而,因为我将.live()绑定到整个按钮类,它会记住我所做的每个ajax调用,并为每个后续按钮重新启动它!这有点棘手,因为我对bind和live之间的区别并不十分清楚(上面的答案是水晶的),所以我想我会把它放在这里以防万一有人正在搜索这个东西

答案 8 :(得分:0)

有一种方法可以获得实时效果,但它有点讨厌。

$(本).unbind( '鼠标移出')。结合( '鼠标移开',函数(){ });

这将清除之前的并重置新的。随着时间的推移,它对我来说似乎很好。

答案 9 :(得分:0)

live和livequery之间的区别是discussed here