jQuery：使用委托时链接 on()

Question

在过去，我曾经成功地将电话链接到live()，例如：

$(".something")
    .live("click", function(e) { ... })
    .live("change", function(e) { ... })
    .live("submit", function(e) { ... });

如今，live()、bind() 和 delegate() 已被闪亮的新 on() 取代。

我尝试用 on() 简单地替换 live()，这似乎很明显：

$(".something")
    .on("click", function(e) { ... })
    .on("change", function(e) { ... })
    .on("submit", function(e) { ... });

但是，当您考虑 on() 的工作原理时，这几乎同样明显行不通。来自http://api.jquery.com/on/：

“事件处理程序仅绑定到当前选定的元素；它们必须在您的代码调用 .on() 时存在于页面上。”

根据 jQuery 文档，我需要绑定到 document 并委托给 .something 来处理实时事件。不幸的是，这意味着如果我想用on() 复制上面的内容，我最终会重复我的委托选择器（.document）：

$(document)
    .on("click", ".something", function(e) { ... })
    .on("change", ".something", function(e) { ... })
    .on("submit", ".something", function(e) { ... });

这按预期工作，但我真的很希望能够像使用live() 那样更清晰地进行链接。我错过了什么吗？

Answer 1

我相信你可以做到：

$(document).on({
    "click" : function(e) { ... },
    "change" : function(e) { ... },
    "submit" : function(e) { ... }
}, ".something");

也就是说，使用“events-map”语法来指定事件及其处理程序，然后指定用于委托样式行为的选择器。

Answer 2

据我了解，您希望得到像 live() 这样简短的内容。使用 on() 你必须多写一点，但如果 .something 是动态添加的，那么你还有另一个选项可以委托事件。

var $div = $('<div/>', {
  'class': 'something',
   click: function () { ... },
   change: function () { ... }
})

// Already has events attached
// no need to delegate
$div.appendTo('body')

Answer 3

.live() 有很多问题。其中之一是当您运行代码时它正在评估选择器".something"，但随后不使用结果（例如浪费），然后在事件发生时在运行时重新评估（就像它需要为了正常工作一样)。

此外，.live() 强制所有动态事件都在 document 对象上，如果您有很多动态事件处理程序，这可能会真正减慢事件处理速度。另一方面，.on() 允许您选择一个更接近实际对象的静态父对象并将事件处理程序附加到该对象，以便可以将不同的动态事件处理程序附加到更靠近源和不同的对象，这使得当有很多事件处理程序时，它们的运行时性能要好得多。

因此，您只需要接受.on() 的新工作方式，因为它更高效。如果您使用现在使用的相同表单，您必须对动态选择器进行更多的重新输入，或者您可以将映射作为第一个参数传递给 .on() 并处理多个一个.on() 调用中的事件。请参阅the jQuery doc 中.on() 的第二种形式.on() 了解更多信息。

这是使用.on() 进行动态行为的simple explanation。