jQuery .on('click') vs. .click() and .delegate('click')

Question

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?

Read the [documention](http://api.jquery.com/click/) for `click()`. **It's not deprecated.** _"...this method is a **shortcut** for ... `.on("click", handler)` as of jQuery 1.7."_ — Sparky, Jul 02 '12 at 15:23
...ok, allow me to rephrase: it is repurposed. It used to be a shortcut for `.bind()`, and now it's not. — Jeremy Holovacs, Jul 02 '12 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. — Anthony Grist, Jul 02 '12 at 15:27
Quote OP: _"My question is, how does one use the .on() method to duplicate the behavior of both the pre-existing `.delegate()` and `.bind()`?"_ ~ I'm curious if you saw the extensive explanations in [the documentation for `on()`](http://api.jquery.com/on/)? — Sparky, Jul 02 '12 at 15:29
Also, as a semi-random aside, event delegation is generally preferable to binding events to individual elements. If you have, for example, 100 elements with a given class and you called `$('.yourclass').click(...);` you'd end up binding 100 click event handlers. With event delegation, you only have a single event handler bound, which will handle the clicks for all 100 elements. So, even if you're not dynamically adding elements, depending on the number of elements being affected, delegation is probably the better choice. — Anthony Grist, Jul 02 '12 at 15:29
@Sparky672, my problem was that the documentation seemed to go into some detail about direct or delegated behavior, which *seemed* to be talking about `bind()` and `delegate()`, respectively, but didn't seem to say it. It left me confused, and inspired this question. — Jeremy Holovacs, Jul 02 '12 at 15:34
@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 02 '12 at 15:43

score 44 · Accepted Answer · edited Dec 04 '19 at 08:01

44

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

edited Dec 04 '19 at 08:01

Ram Segev

2,563
2
12
24

answered Jul 02 '12 at 15:26

Frédéric Hamidi

258,201
41
486
479

Excellent. This is what I suspected, but the documentation was not clear to me. Thank you. – Jeremy Holovacs Jul 02 '12 at 15:35
4

Interestingly it seems that delegate is much much faster than the others: http://jsperf.com/on-vs-bind-vs-delegate-vs-native, update with delegated on(), as fast as delegate... – Simon Jul 02 '12 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 '16 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. – Frédéric Hamidi Oct 10 '16 at 21:12

Guffa · Answer 2 · 2012-07-02T15:35:07.227

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.

edited Jul 02 '12 at 15:35

answered Jul 02 '12 at 15:27

Guffa

687,336
108
737
1,005

score 2 · Answer 3 · answered Jul 02 '12 at 15:23

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+

score 2 · Answer 4 · answered Jul 02 '12 at 15:23

2

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

answered Jul 02 '12 at 15:23

antyrat

27,479
9
75
76

jQuery .on('click') vs. .click() and .delegate('click')

4 Answers4

UPDATE:

Linked

Related