57

由于版本 1.7live已弃用。

以下示例很容易与新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...
 });
4

3 回答 3

99 
$(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...
});
于 2011-12-11T04:54:25.007 回答
9

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

.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
});
于 2011-12-11T05:07:40.913 回答
-3

您可能想查看 live() 的文档，记录了对 on() 的切换：http: //api.jquery.com/live/

于 2011-12-11T05:46:52.197 回答