How to translate jQuery .live() to .on() with events bound to this?

Question

I'm in the process of converting code from the deprecated .live() API to .on() (see the jQuery 1.7 release notes)

I have live events attached to this in multiple custom jQuery plugins, e.g.

this.live('click', function() {
    ...
});

the jQuery .live() doc has some guidance on how to migrate to .on() as follows:

$(selector).live(events, data, handler);                // jQuery 1.3+
$(document).on(events, selector, data, handler);        // jQuery 1.7+

however, this doesn't work:

$(document).on('click', this, function() {
    ...
});

so... how do I make live events bound to this work with the new on() API?

Answer 1

Give this a shot:

$(document).on('click', this.selector, handler);

A jQuery object has a selector property that represents the selector used to create that object.

Note that the selector is modified with traversal methods, so I would assume that your plugin is generally used upon initial DOM selection.

---

To avoid using an internal property, you could simply change the API of your plugin to require a selector to be passed explicitly.

Answer 2

The .selector property is undocumented and probably will be removed when .live() is removed. What did this code look like when you were using .live()? How are these plugins used?

Answer 3

As of jQuery 1.7, the on^docs function is used to replace the existing separate methods of binding events:

• bind^docs
• delegate^docs
• live^docs

one^docs is a special case, and you should continue to use it as is.

The existing events continue to exist, and are simply aliases of on. There is no official report to suggest that they will be removed, so you'd be safe to continue to use them if you understand them better. live and die have been deprecated as of jQuery 1.7 as mentioned in a blog post and on the live docs.

The on event has multiple formats, but the function signature is as follows:

.on( events [, selector] [, data], handler )

Bind:

$(selector).bind(events, data, handler);
$(selector).on(events, null, data, handler);

Source:

bind: function( types, data, fn ) {
  return this.on( types, null, data, fn );
}

Delegate:

$(selector).delegate(subselector, events, data, handler);
$(selector).on(events, subselector, data, handler);

Source:

delegate: function( selector, types, data, fn ) {
  return this.on( types, selector, data, fn );
}

Live:

$(selector).live(events, data, handler);
$(document).on(events, selector, data, handler);

Source:

live: function( types, data, fn ) {
  jQuery( this.context ).on( types, this.selector, data, fn );
  return this;
}

_{Note that this.context was set using this.context = document; as specified at $(document).on(...).}