javascript - 多个选择器上的 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() 只是将文档绑定(bind)为监听器。

我的两分钱是你几乎总能找到比 document 更好的听众。至少，几乎所有页面都使用主要内容包装器。这消除了页眉、页脚中的节点，有时还消除了作为监听器的侧边栏中的节点。

将 .on 用作委托(delegate)函数的最佳方法是识别预期永远不会被销毁或以其他方式解除事件绑定(bind)的最近的共同祖先。例如，如果您有一个通过 ajax 请求更新和更改的表单，则监听器可以是表单节点本身(如果仅更新表单的内容)或围绕表单的容器元素(通常是 div)。如果不存在这样的 div，您可以随时添加它，或者您可以沿着树向上移动到下一个祖先。

[编辑添加:]

在提供的特定示例代码中，很难说是否有更好的监听器同时包含 #header 和 #sb-sec。但是假设这些东西共享一个 id 为“mainContainer”的祖先，您更高效的代码只需换掉监听器:

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