jQuery中的bind和live方法有什么区别?
我很想知道bind函数和live函数之间的区别 在我看来,它们几乎一模一样 我读了,但它没有告诉我区别 谢谢 .bind()将事件附加到调用时存在或与选择器匹配的元素。之后创建的任何元素或由于类已更改而匹配的元素都不会触发绑定事件jQuery中的bind和live方法有什么区别?,jquery,bind,live,Jquery,Bind,Live,我很想知道bind函数和live函数之间的区别 在我看来,它们几乎一模一样 我读了,但它没有告诉我区别 谢谢 .bind()将事件附加到调用时存在或与选择器匹配的元素。之后创建的任何元素或由于类已更改而匹配的元素都不会触发绑定事件 .live()适用于现有和将来的匹配元素。在jQuery 1.4之前,这仅限于以下事件:click、dblclick mousedown、mouseup、mousemove、mouseover、mouseout、keydown、keypress、keypup将事件绑定
.live()适用于现有和将来的匹配元素。在jQuery 1.4之前,这仅限于以下事件:click、dblclick mousedown、mouseup、mousemove、mouseover、mouseout、keydown、keypress、keypup将事件绑定到指定模式,用于调用当前DOM时当前DOM中的所有匹配项。Live将事件绑定到当前DOM的指定模式,并绑定到DOM中未来的匹配项,即使它发生了更改 例如,如果您绑定$(“div”).bind(“hover”),它将应用于当时DOM中的所有“div”。如果随后操纵DOM并添加一个额外的“div”,它将不会绑定该悬停事件。使用live而不是bind也会将事件发送到新的div。想象一下这样的场景:
元素。
$('img').bind('click',function(){…})代码>
- 添加一些额外的图像(使用
,或get()
,任何操作)html()
- 新图像没有任何绑定李>
$('img')…
时新图像不存在,因此它没有将事件处理程序绑定到它们
现在,如果您这样做:
元素。
$('img').live('click',function(){…})代码>
- 添加一些额外的图像(使用
,或get()
,任何操作)html()
- 新图像确实有绑定李>
魔法?就一点点。事实上,jQuery将一个通用事件处理程序绑定到DOM树中更高的另一个元素(body?document?不知道),并让事件冒泡。当它到达泛型处理程序时,它会检查它是否匹配您的
live()
事件,如果匹配,则会激发它们,无论元素是在live()
调用之前还是之后创建的。与它们所说的相反,我认为最好在您可以的时候/地方坚持使用bind
,只有在您必须的时候才使用live
。简而言之:.bind()
将只应用于您当前在jQuery对象中选择的项目.live()
将应用于所有当前匹配的元素,以及将来可能添加的任何元素
它们之间的根本区别在于live()
利用了。也就是说,当您单击某个按钮时,该按钮可能存在于
元素、
元素中;实际上,您实际上是在同时单击所有这些元素
live()
通过将事件处理程序附加到文档而不是元素来工作。如前所示,当您单击该按钮时,文档将收到相同的单击事件。然后,它会查找事件所针对的元素行,并检查其中是否有与您的查询匹配的元素
这样做的结果有两方面:首先,这意味着您不必继续将事件重新应用于新元素,因为它们将在事件发生时隐式添加。然而,更重要的是(取决于您的情况),这意味着您的代码要轻得多!如果页面上有50个
标记,并且运行此代码:
$('img').click(function() { /* doSomething */ });
$('img').live('click', function() { /* doSomething */ });
…然后将该函数复制到每个元素中。但是,如果您有此代码:
$('img').click(function() { /* doSomething */ });
$('img').live('click', function() { /* doSomething */ });
…然后该函数只存储在一个位置(文档上),并在事件发生时应用于与查询匹配的任何对象
但是,由于这种冒泡行为,并非所有事件都可以这样处理。正如Ichiban所指出的,这些受支持的事件是click、dblclick mousedown、mouseup、mousemove、mouseover、mouseout、keydown、keypress、keypup。由于我自己的愚蠢,我不得不进行一些调试之后,才想添加到这些事件中。我将.live()应用于页面上的一个按钮类,假设它只会呈现出我试图传递给查询字符串的正确ID,并执行我希望使用ajax调用执行的操作。我的应用程序动态添加了与库存项目关联的按钮。例如,向下钻取“可口可乐”按钮的类别,将可口可乐添加到您的订单中。再次从顶部向下钻取,并添加“BUDLITE”——每次我都希望通过AJAX调用将这些项目输入到表中
然而,由于我将.live()绑定到整个按钮类,它会记住我所做的每个ajax调用,并为后续的每个按钮重新启动它!这有点棘手,因为我不太清楚bind和live之间的区别(上面的答案是crystal),所以我想我把这个放在这里,以防有人在搜索这个东西。有一种方法可以获得live效果,但有点恶心 $(this).unbind('mouseout').bind('mouseout',function()){ });
这将清除上一个并重置新的。随着时间的推移,它似乎对我很有效。live和livequery的区别在于。很好地阅读了以下内容:
现在(从jQuery 1.7开始)不推荐使用.on()函数-所有这些jQuery方法都用于将事件附加到选择器或元素。但它们都是不同的 .bind():这是绑定事件最简单、最快捷的方法。但是bind()的问题是,它不适用于动态添加的与同一选择器匹配的元素。bind()只将事件附加到当前元素,而不是将来的元素。除此之外,它在处理大量选择时也存在性能问题 .li