34

在过去，我曾经live()非常成功地链接调用，例如：

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

这些天来，live()，bind()并delegate()已被闪亮的新on().

我尝试简单地替换live()为on()看起来很明显的：

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

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

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

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

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

这可以按预期工作，但我真的很希望能够像使用live(). 我错过了什么吗？

4

3 回答 3

87

我相信你可以做到这一点：

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

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

于 2012-08-08T02:32:11.913 回答
0

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

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

因此，您只需要使用有效的新方法即可.on()。.on()如果您使用现在使用的相同表单，或者您可以将映射作为第一个参数传递给并处理多个事件，那么对您来说应该没什么大不了的.on()来电。有关更多信息，请参阅jQuery 文档.on()中的第二种形式。.on()

这是使用动态行为的简单解释。.on()

于 2012-08-08T02:25:51.077 回答
0

据我了解你的问题，你想要的东西像live(). 使用on()你必须多写一点，但如果.something是动态添加的，那么你还有另一个选项可以委托事件。

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

// Already has events attached
// no need to delegate
$div.appendTo('body')
于 2012-08-08T02:34:10.430 回答