5

I am trying to change all my .live() to .on() as the prior is now deprecated.

I am struggling to understand how it works though. Before I used this code and it worked fine...

$('#lightBoxClose').live('click', function() {
    $('#lightBox').fadeOut();
});

So I tried changing it to,

$('#lightBoxClose').on('click', function() {
    $('#lightBox').fadeOut();
});

But it doesn't work can anyone please explain what I am supposed to be doing thanks.

cgwebprojects
  • 3,382
  • 6
  • 27
  • 40

2 Answers2

11

You have to bind to an element that already exists at the time of the binding, passing the target selector as the second argument. That element must be an ancestor of the eventual click target, so it can catch the bubbled event. This technique is called delegation.

For example, using the document element:

$(document).on('click', '#lightBoxClose', function() {
    $('#lightBox').fadeOut();
});
bfavaretto
  • 71,580
  • 16
  • 111
  • 150
  • 2
    Really? That's so disappointing. Why doesn't it just bind to the window by default? – Anthony Mar 30 '12 at 04:05
  • @Anthony, because `.on()` does not just replace `.live()`, it's now the standard way to bind all events. So it cannot force delegation by assuming you always want to bind to `document`. (Note: you can't bind to the `window` object, because DOM events won't reach it.) – bfavaretto Mar 30 '12 at 04:13
  • @ bfavaretto : if that's the case, will binding shorthand functions like `.click()` work if it's appended to an existing element? Like `$(document).$('.my_controllers').click("blah")`? It just seems like a bit much to a) have to establish in advance a parent when everyone is going to use `document` if it's not crucial to a specific panel and b) have to lose the event-specific shorthand methods that make jquery easier to look at and write. Seems like it's moving away from the lazy and weak ways I so identify with. – Anthony Mar 30 '12 at 04:34
  • @Anthony, the shorthand methods like `.click()` are not deprecated, I use them all the time. It's just that `.on()` now combines the power of live, bind and delegate, so they're encouraging its use. – bfavaretto Mar 30 '12 at 04:47
  • They may not be deprecated, but they are (and never have been) dynamically binding to new elements, and with this being in higher and higher demand as jquery gets more sophisticated, two things happen 1) less experienced developers hit their heads on the wall when the event methods don't work and 2) more experienced developers will always use `.on()` as a habit. Don't get me wrong, it's better to have one future-binding method over three, I just wish the listener list was a live node list instead of a subscription model. – Anthony Mar 30 '12 at 05:02
2

Please use the search before posting, as it's posted all around SO.

See: JQuery switching application from "live" to "on" method

$(document).on('click', '#lightBoxClose', function() {
    $('#lightBox').fadeOut();
});
Community
  • 1
  • 1
jeremyharris
  • 7,884
  • 22
  • 31