Jquery changing .live to .on,

Question

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.

Answer 1

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();
});