多个选择器上的jQuery on()方法

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
});