1

I've been reading about replacing jQuery live() functions with on(), but they only work the same way as non-live functions.

For example, using the $('a').on('click', function(){}); has the same effect as using: $('a').click(function(){});

I need to replicate the functionality of $('a').live('click', function(){}); because I'm adding elements to the page dynamically.

Alex
  • 8,353
  • 9
  • 45
  • 56
  • 3
    Scroll down a bit at the documentation, and you will see the answer...: http://api.jquery.com/live/ – Rob W Mar 20 '12 at 20:48
  • 1
    possible duplicate of [jQuery .on function for future elements, as .live is deprecated](http://stackoverflow.com/questions/8191064/jquery-on-function-for-future-elements-as-live-is-deprecated) – Brad Mar 20 '12 at 20:50

2 Answers2

4

You need to provide a selector:

$('#container').on('click', 'a', function(){})

Where #container is the id of the static parent of all the relevant anchors.
Try to attach the on to the closest static parent.

on docs:

if selector is omitted or is null, the event handler is referred to as direct or directly-bound. The handler is called every time an event occurs on the selected elements, whether it occurs directly on the element or bubbles from a descendant (inner) element.

When a selector is provided, the event handler is referred to as delegated. The handler is not called when the event occurs directly on the bound element, but only for descendants (inner elements) that match the selector. jQuery bubbles the event from the event target up to the element where the handler is attached (i.e., innermost to outermost element) and runs the handler for any elements along that path matching the selector.

gdoron
  • 147,333
  • 58
  • 291
  • 367
  • 1
    This method is preferred over the other answers that bound the event onto body/document. By having a more focused element (#container), you operate a little more efficiently. You should bind the $.on to the nearest common parent of all elements that are going to have this event. If that is body, that is okay. But if they are all in a single table, then use that table as the container. – kingcoyote Mar 20 '12 at 20:50
  • Brilliant, thank you - I was being too hasty it seems. The Docs page for this was very text heavy, and I just wanted a nice quick answer, thanks! – Alex Mar 20 '12 at 20:53
  • @Alexcoady. though it might be heavy, You will learn a lot from reading each page of the docs. I did it, suggest you to do the same if you're using jQuery on a regular basis. – gdoron Mar 20 '12 at 20:56
2

The equivalent of:

$('a').live('click', function(){});

is this:

$(document).on('click', 'a', function(){});

But, .on() is more powerful because rather than attach all event handlers to the document object like .live() does, you can pick a static parent that is much closer to your dynamic objects and will be more efficient, particularly if you have a lot of delegated event handlers.

For example if you had a container div called links, you would do this:

$("#links").on('click', 'a', function(){});

The selector in the jQuery object is the static object that you want the event handler bound to. The selector in the arguments to .on() is a selector that matches the objects who's events you want to handle that will bubble up to your static parent object.

jfriend00
  • 683,504
  • 96
  • 985
  • 979