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?

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?

• javascript
• jquery

• bind, delegate, and live are not deprecated AFAIK, unless you've found an official notice stating that they are, in which case: please cite your source. – zzzzBov Commented Dec 1, 2011 at 14:40
• The notice about live being deprecated is right in the jQuery docs that akavlie linked to. – Anthony Jack Commented Dec 1, 2011 at 15:26
• 1 zzzzBov, it states clearly in this blog post, as well as the doc for .live() that it's deprecated. .bind() & .delegate() otoh are considered to be superseded but not deprecated apparently. Seems that they took the more firm stance on .live() due to the downsides noted in the doc. – akavlie Commented Dec 2, 2011 at 22:29
• @AnthonyJack, @akavlie, I apologize for the mistake, I hadn't noticed the change to the live docs. I think it ought to be in big bold print at the top to alert developers, rather than tucked under the function signatures discreetly. – zzzzBov Commented Dec 3, 2011 at 1:06
• @zzzzBov No biggie, yeah I agree it should be highlighted more. I just happened to know that change was coming soon so looked for it a little more closely in the docs. – Anthony Jack Commented Dec 3, 2011 at 8:01

4 Answers 4

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.

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?

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(...).}

$(selector).on(events, data, handler)

Still works fine. You could still use that. Check out the .on docs