Question

由于版本1.7 live已弃用。

以下示例很容易与新的on方法兼容：

$('nav li, #sb-nav li, #help li').live('click', function () {
    // code...
});

使用on：

$('nav, #sb-nav, #help').on('click', 'li', function () {
    // code...
});

如何使用on重写以下示例？

 $('#header .fixed-feedback-bn, #sb-sec .feedback-bn').live('click', function () {
     // code...
 });

Answer 1

$(document).on('click', '#header .fixed-feedback-bn, #sb-sec .feedback-bn', function () {
     // code...
 });

.live()只是将文档绑定为侦听器。

我的两分钱是你几乎总能找到比document更好的倾听者。至少，几乎所有页面都使用主内容包装器。这样可以消除页眉，页脚和侧边栏中的节点作为侦听器。

使用.on作为委托函数的最佳方法是识别最接近的共同祖先，该祖先预计永远不会被销毁或以其他方式未绑定事件。例如，如果您有一个由ajax请求更新和更改的表单，则侦听器可以是表单节点本身（如果只更新表单的内容）或包含表单的容器元素（通常是div）。如果没有这样的div，你可以随时添加它，或者你可以将树上到下一个祖先。

[编辑添加：]

在提供的特定示例代码中，很难说是否有更好的侦听器同时包含#header和#sb-sec。但想象这些东西与id“mainContainer”共享一个祖先，你的更高效的代码只是交换出听众：

$('#mainContainer').on('click', '#header .fixed-feedback-bn, #sb-sec .feedback-bn', function () {
   // code...
});

Answer 2

如果您尝试使用.on()以便可以在初始.on()调用之后侦听可能创建的DOM对象上的事件，那么最有效的方法是找到一个不会来去的现有父对象，你可以将事件监听器绑定到现在。

.live()将所有侦听器放在文档对象（主父对象）上，如果你有很多听众，可能效率很低。

.on()允许您指定父对象最有效的内容。因此，如果您想将所有这些事件处理程序放在一个语句中，并且这些'#header .fixed-feedback-bn，＃sb-sec .feedback-bn'没有共同父项，那么您必须指定像格雷格那样的父母写的文件。

但是，更有效的方法是根据需要将其分开。对于没有动态需求的元素，只需直接绑定到该元素即可。例如，如果#header和＃sb-sec没有出现/不需要动态行为，你可以直接找到它：

$('#header, #sb-sec').on('click', function() {
    // code here
});

并且，对于需要一些动态行为的元素，选择一个合适的公共父级并使用公共父级作为事件的捕获点并将选择器作为过滤器来选择它，因为它们是您想要的子元素的过滤器要点火的事件：

$('#feedback').on('click', '.feedback-bn, .fixed-feedback-bn', function() {
    // code here
});

Answer 3

您可能希望查看live（）的文档，记录切换到on（）：http://api.jquery.com/live/

多个选择器上的jQuery on（）方法

3 个答案: