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?

Answer 1

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

Answer 2

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.