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 for click(). It's not deprecated. "...this method is a shortcut for ... .on("click", handler) as of jQuery 1.7." — Sparky
– Sparky, Commented 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. — user610217
– user610217, Commented 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. — Anthony Grist
– Anthony Grist, Commented Jul 2, 2012 at 15:27
@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
– Guffa, Commented Jul 2, 2012 at 15:43

Ram Segev · Accepted Answer · 2019-12-04 08:01:12Z

47

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 4, 2019 at 8:01

Ram Segev

2,5612 gold badges14 silver badges24 bronze badges

answered Jul 2, 2012 at 15:26

Frédéric Hamidi

264k42 gold badges497 silver badges486 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

user610217 Over a year ago

Excellent. This is what I suspected, but the documentation was not clear to me. Thank you.

Seimen Over a year ago

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...

ontananza Over a year ago

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.

Frédéric Hamidi Over a year ago

@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.

Guffa · Accepted Answer · 2012-07-02 15:35:07Z

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 2, 2012 at 15:35

answered Jul 2, 2012 at 15:27

Guffa

703k112 gold badges760 silver badges1k bronze badges

Comments

Rob W · Accepted Answer · 2012-07-02 15:23:17Z

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+

answered Jul 2, 2012 at 15:23

Rob W

350k87 gold badges811 silver badges683 bronze badges

Comments

antyrat · Accepted Answer · 2012-07-02 15:23:30Z

2

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

answered Jul 2, 2012 at 15:23

antyrat

27.7k9 gold badges78 silver badges77 bronze badges

Collectives™ on Stack Overflow

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

4 Answers 4

UPDATE:

4 Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

UPDATE:

4 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related