jQuery:使用委托时对()进行链接

In the old days, I used to chain calls to live() with great success, e.g.:

在过去，我常常用一连串的问询来表示我的成功。

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

These days, live(), bind() and delegate() have been superseded by the shiny new on().

现在，live()、bind()和delegate()已经被闪亮的new on()所取代。

I've tried simply replacing live() with on() which would seem obvious:

我试着用on()代替live()，这看起来很明显:

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

However, it's almost as obvious that this won't work when you consider how on() works. This from http://api.jquery.com/on/:

然而，当您考虑on()的工作方式时，很明显这是行不通的。这从http://api.jquery.com/on/:

"Event handlers are bound only to the currently selected elements; they must exist on the page at the time your code makes the call to .on()."

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

According to the jQuery docs, I need to bind to document and delegate to .something to handle live events. Unfortunately, this means I end up repeating my delegate selector (.document) if I want to replicate what I have above with on():

根据jQuery文档，我需要绑定到document并委托到。something来处理活动事件。不幸的是，这意味着如果我想复制上面的on()函数，我将重复我的委托选择器(.document):

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

This works as expected but I'd really love to be able to chain more clearly like I do using live(). Am I missing something?

这是意料之中的事情，但我真的很希望能够像我使用live()那样更清晰地链接。我遗漏了什么东西?

3 个解决方案

#1

I believe you can do this:

我相信你可以做到:

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

That is, use the "events-map" syntax to specify the events and their handlers, and then specify the selector to use for the delegate-style behaviour.

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

#2

As I understand your question you want something as short as live(). Using on() you have to write a bit more, but if .something is being added dynamically then you have another option that also delegates the event.

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

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

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

#3

.live() has a bunch of problems. One of them was that it was evaluating the selector ".something" when you ran the code, but then not using the result (e.g. wasteful) and then re-evaluating at runtime when the event occurred (like it needs to in order to work properly).

.live()有很多问题。其中一个是它对选择器求值。“当您运行代码时，但是没有使用结果(例如浪费)，然后在事件发生时在运行时重新评估(为了正常工作，需要这样做)”。

In addition .live() forced all dynamic events to be on the document object which could really slow event handling down if you had a lot of dynamic event handlers. .on(), on the other hand, lets you pick a static parent that is much closer to the actual object and attach the event handler to that object so different dynamic event handlers can be attached both closer to the source and to different objects which makes their runtime performance much, much better when there are lots of event handlers.

除了.live()强制所有动态事件的文档对象可能真的事件处理慢下来如果你有很多动态的事件处理程序。碧绿(),另一方面,允许您选择一个静态的父母,更接近于实际的对象,并将事件处理程序附加到对象,不同的动态事件处理程序可以连接两个接近源和不同对象使其运行时性能,如果有很多事件处理程序，那就更好了。

So, you need to just live with the new way that .on() works as it is much more efficient. It should be no big deal to you that you have to do a slight more retyping of the dynamic selector if you use the same form you're using now or, you can pass a map as the first parameter to .on() and handle multiple events in one .on() calls. See the second form of .on() in the jQuery doc for .on() for more info.

因此，您需要适应.on()的新工作方式，因为它要高效得多。如果您使用的是现在正在使用的表单，那么您必须稍微多输入一些动态选择器，这对您来说应该不是什么大问题，或者您可以将映射作为第一个参数传递给.on()，并在一个.on()调用中处理多个事件。有关更多信息，请参见jQuery doc中的.on()的第二种形式。

Here's a simple explanation of using .on() for dynamic behavior.

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

#1