65

我很想知道绑定和实时函数之间的区别。

对我来说，它们似乎几乎相同。

我阅读了 live/bind 方法的好处，但它并没有告诉我不同​​之处......

谢谢！

4

10 回答 10

89

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

它们之间的根本区别在于live()使用事件冒泡。也就是说，当您单击一个按钮时，该按钮可能存在于一个<p>、一个<div>、一个<body>元素中；所以实际上，您实际上是在同时点击所有这些元素。

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

这样做的结果是双重的：首先，这意味着您不必继续将事件重新应用于新元素，因为它们会在事件发生时被隐式添加。但是，更重要的是（取决于您的情况），这意味着您的代码要轻得多！如果<img>页面上有 50 个标签并运行以下代码：

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

...然后将该函数复制到每个元素中。但是，如果您有此代码：

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

...然后该函数仅存储在一个位置（在文档上），并在事件发生时应用于与您的查询匹配的任何内容。

但是，由于这种冒泡行为，并非所有事件都可以这样处理。正如 Ichiban 所指出的，这些支持的事件是 click、dblclick、mousedown、mouseup、mousemove、mouseover、mouseout、keydown、keypress、keyup。

于 2009-06-02T00:25:22.370 回答
77

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

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

于 2009-06-01T22:09:30.430 回答
5

Bind 会将事件绑定到指定的模式，在您调用它时针对当前 DOM 中的所有匹配项。Live 会将事件绑定到当前 DOM 的指定模式以及 DOM 中的未来匹配项，即使它发生了变化。

例如，如果您绑定 $("div").bind("hover", ...) 它将应用于当时 DOM 中的所有“div”。如果您随后操作 DOM 并添加一个额外的“div”，它将不会绑定悬停事件。使用 live 而不是 bind 也会将事件分派到新的 div。

于 2009-06-01T22:12:44.183 回答
5

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

现在（自 jQuery 1.7 起）已弃用 .on() 函数 - http://api.jquery.com/on/

于 2012-01-13T13:18:32.817 回答
4

想象一下这种情况：

  1. 我有几个<img>元素。
    • $('img').bind('click', function(){...});
    • 添加一些额外的图像（使用get()，或html()，任何东西）
    • 新图像没有任何约束力！！

当然，由于在您执行第 2 步时新图像不存在$('img')...，因此它没有将事件处理程序绑定到它们。

现在，如果你这样做：

  1. 我有几个<img>元素。
    • $('img').live('click', function(){...});
    • 添加一些额外的图像（使用get()，或html()，任何东西）
    • 新图像确实具有约束力！

魔法？只是一点点。事实上，jQuery 将一个通用事件处理程序绑定到 DOM 树中更高的另一个元素（正文？文档？不知道）并让事件冒泡。当它到达通用处理程序时，它会检查它是否与您的live()事件匹配，如果匹配，它们就会被触发，无论元素是在live()调用之前还是之后创建的。

于 2009-06-01T22:13:05.837 回答
3

除了他们所说的之外，我认为最好尽量坚持bind何时/何地，live只在必要时使用。

于 2009-06-01T22:17:47.573 回答
1

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

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

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

在这里了解更多

于 2014-02-12T14:09:39.063 回答
0

由于我自己的愚蠢而不得不进行一些调试后，我想补充一下。我将 .live() 应用于页面上的一类按钮，假设它只会呈现我试图传递查询字符串的正确 ID，并执行我想要对 ajax 调用执行的操作。我的应用程序动态添加了与库存项目关联的按钮。例如，向下钻取类别到“COKE”按钮以将可乐添加到您的订单中。再次从顶部向下钻取，并添加“BUDLITE” - 每次我希望通过 AJAX 调用将这些项目输入到表中。

但是，由于我将 .live() 绑定到整个按钮类，它会记住我所做的每个 ajax 调用并为每个后续按钮重新触发它！这有点棘手，因为我不太清楚 bind 和 live 之间的区别（上面的答案是关于它的水晶），所以我想我会把它放在这里以防万一有人在搜索这些东西.

于 2009-07-10T04:16:41.717 回答
0

有一种方法可以获得现场效果，但它有点讨厌。

$(this).unbind('mouseout').bind('mouseout',function(){ });

这将清除以前的并重置新的。随着时间的推移，它对我来说似乎工作得很好。

于 2009-10-09T15:34:36.387 回答
0

这里讨论了live 和 livequery 之间的区别。

于 2009-10-14T19:55:11.290 回答