始终使用 'live' 的 jQuery 缺点

Question

在我的应用程序中始终使用 jQuery 的“实时”功能有什么缺点吗？

如果我将点击处理程序附加到我想要的所有元素，然后决定使我的应用程序 AJAX，我必须在我的 jQuery 中仔细检查并添加大量“实时”处理程序。

我说的是性能和 HTTP 请求等...缺点是什么？

Answer 1

您永远不应该使用live。当他们引入 jQuery 时，这是一个错误。仅使用委托(delegate)。

当使用live时，jQuery将必须监听文档上的每一次点击。在大多数情况下，这是矫枉过正的。想象一下:

<table id="products">
    <tr>
        <td></td>
        <td></td>
    </tr>
    <tr>
        <td></td>
        <td></td>
    </tr>
</table>

现在，您想要在所有这些行上绑定(bind)一个单击事件处理程序。如果您采用live方式，您将执行以下操作:

$('tr').live('click', function(){...});

这里发生的情况是，每当单击整个页面上的任何元素时，jQuery都必须通过您的选择器运行它(在本例中tr ) 来查看是否匹配。这是无缘无故地浪费大量资源。您可以通过以下方式完成同样的事情:

$('#products').delegate('tr', 'click', function(){...});

这将导致 jQuery 仅监听该表内的单击事件(尽管它仍会对单击的每种类型的元素运行选择器检查)。

现在，有时您确实需要监听整个页面上的点击。但是，即使您确实需要这样做，最好还是使用 $(document).delegate('a', 'click', function(){...});。

为什么？

想象一下以下场景:

$('a').live('click', function(){...});

您在这里所做的是遍历 DOM 来查找所有 a 标记，但您没有对该集合执行任何操作。您只是在做您本可以完成的事情:

$(document).delegate('a', 'click', function(){...});

但不先遍历 DOM!

<小时/>

进一步阅读:

http://api.jquery.com/live/#caveats
http://www.alfajango.com/blog/the-difference-between-jquerys-bind-live-and-delegate/

<小时/>

更新:随着 jQuery 1.7 的出现，the new .on method was introduced :

The .on() method attaches event handlers to the currently selected set of elements in the jQuery object. As of jQuery 1.7, the .on() method provides all functionality required for attaching event handlers.

因此，在上面的示例中，您可以使用:

$('#products').on('click', 'tr',  function(){...});

还有这个

$(document).on('click', 'a', function(){...});

分别。

尽管旧方法仍然有效，但这是现在的首选方法。