21

I'm used to using .click() and delegate('click'), so when I read both were deprecated in recent versions of jQuery I thought I'd read up on it, but I'm scratching my head a bit.

The documentation here seems to suggest that this is a drop-in replacement for .live() and .delegate(), but .click() and .bind() had a different behavior, namely binding to currently existing objects, where the others bound to any objects that matched the selector pattern througout the lifespan of the DOM.

In most cases, this wouldn't make a big difference, but when adding elements to your DOM dynamically, this is an important distinction. New objects matching the old pattern would not have listeners tied to the click event using .click(), but would with .delegate().

My question is, how does one use the .on() method to duplicate the behavior of both the pre-existing .delegate() and .bind()? Or is everything in the future going towards the .delegate() style?

8
  • Read the documention for click(). It's not deprecated. "...this method is a shortcut for ... .on("click", handler) as of jQuery 1.7."
    – Sparky
    Jul 2, 2012 at 15:23
  • ...ok, allow me to rephrase: it is repurposed. It used to be a shortcut for .bind(), and now it's not. Jul 2, 2012 at 15:25
  • It's now a shortcut for .on(), which has replaced .bind() for binding events to existing elements. It's also replaced .delegate() for event delegation on static (non-document) elements, and .live() for event delegation on the entire document. Jul 2, 2012 at 15:27
  • Just use .on() and you're doing well
    – Seimen
    Jul 2, 2012 at 15:29
  • 1
    @AnthonyGrist: That depends on what kind of events you handle, and how many. If you have 100 events that are completely unrelated, it's more efficient to handle them on the element directly, instead of letting all events pass through a single handler that has to go through all 100 selectors to figure out what event goes to what handler.
    – Guffa
    Jul 2, 2012 at 15:43

4 Answers 4

46

Both modes are still supported.

The following call to bind():

$(".foo").bind("click", function() {
    // ...
});

Can be directly converted into the following call to on():

$(".foo").on("click", function() {
    // ...
});

And the following call to delegate():

$("#ancestor").delegate(".foo", "click", function() {
    // ...
});

Can be converted into the following call to on():

$("#ancestor").on("click", ".foo", function() {
    // ...
});

For completeness, the following call to live():

$(".foo").live("click", function() {
    // ...
});

Can be converted into the following call to on():

$(document).on("click", ".foo", function() {
    // ...
});

UPDATE:

Except on event, the rest of the events were deprecated in different jQuery versions.

  • bind - version deprecated: 3.0
  • live - version deprecated: 1.7, removed: 1.9
  • delegate - version deprecated: 3.0
4
  • Excellent. This is what I suspected, but the documentation was not clear to me. Thank you. Jul 2, 2012 at 15:35
  • 4
    Interestingly it seems that delegate is much much faster than the others: jsperf.com/on-vs-bind-vs-delegate-vs-native, update with delegated on(), as fast as delegate...
    – Seimen
    Jul 2, 2012 at 15:39
  • With delegate() If i remove ".foo" element and later i add again ".foo" the initial bind persists. with on() this behavior is the same? im trying on jquery 2.2.4 and seems to remove the bind.
    – ontananza
    Oct 10, 2016 at 17:41
  • 1
    @ontananza, depends on the form of on() you're using. If you're using the binding form and the matching element is removed, the event won't be handled indeed. If you're using the delegated form and the ancestor is removed, the event won't be handled indeed either. You have to understand what's going on under the hood in order to use on() appropriately. Oct 10, 2016 at 21:12
6

The on method can replace both bind and delegate depending on how it's used (and also click as bind can replace that):

.click(handler) == .on('click', handler)

.bind('click', handler) ==  .on('click', handler)

.delegate('click', '#id', handler) == .on('click', '#id', handler)

Neither the click, delegate or bind methods have made it to the deprecated page yet. I doubt that the click method ever will.

2

You can deduce the usage for the aliases from the source code.

console.log($.fn.delegate);
function (a, b, c, d) {
    return this.on(b, a, c, d);
}

console.log($.fn.bind);
function (a, b, c) {
    return this.on(a, null, b, c);
}

The documentation also provides the usage examples:

$(elements).delegate(selector, events, data, handler);  // jQuery 1.4.3+
$(elements).on(events, selector, data, handler);        // jQuery 1.7+
2

.delegate() and .bind() uses on method. And .click() is a shortcut for .on() too.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.