30

As described on http://api.jquery.com/live/:

As of jQuery 1.7, the .live() method is deprecated. Use .on() to attach event handlers.

Right. So instead of 

$('.dynamicallyCreatedElement').live('click', function(){
  console.log('click');
});

I should use:

$('.dynamicallyCreatedElement').on('click', function(){
  console.log('click');
});

However it does not bind event to elements created after on() calling. So is it really better live() method ?

Am I missing something ?

thecodeparadox
  • 86,271
  • 21
  • 138
  • 164
hsz
  • 148,279
  • 62
  • 259
  • 315
  • 1
    possible duplicate of [jQuery 1.7 - Turning live() into on()](http://stackoverflow.com/questions/8021436/jquery-1-7-turning-live-into-on) – Felix Kling Apr 24 '12 at 09:44
  • 1
    If you just read a bit further in the documentation you linked to (third paragraph): *"Rewriting the `.live()` method in terms of its successors is straightforward; these are templates for equivalent calls for all three event attachment methods: `$(document).on(events, selector, data, handler); // jQuery 1.7+`"*. – Felix Kling Apr 24 '12 at 09:45
  • @FelixKling Thank you, didn't find before. – hsz Apr 24 '12 at 09:45
  • Glad you've asked this. It's frequently suggested they are same, when they really aren't (and it's an annoying change IMO). – Iain Collins May 29 '13 at 20:01

4 Answers4

63

To use on in the same manner as live used to work you need to use it like:

$(document).on("click", ".dynamicallyCreatedElement", function() {   
    console.log('click'); 
});

So you bind the on handler to the document itself (or, actually, the container element where the new wlements will be "appearing" -- Thanks to @devnull69 for the clarification), then pass it an event type and the selector.

You'll find a couple of examples halfway through the live documentation page.

eisbehr
  • 12,243
  • 7
  • 38
  • 63
Sergi Papaseit
  • 15,999
  • 16
  • 67
  • 101
  • 7
    It doesn't necessarily have to be `$(document)`. The first selector can be any already existing parent/container element of the dynamically created element – devnull69 Apr 24 '12 at 09:48
  • Ok, true, as long as the new elements will be appearing in that parent/container. - I've updated my answer; thank you. – Sergi Papaseit Apr 24 '12 at 09:51
  • Indeed, you should try to avoid using `$(document).on(...)` in these cases, as this has created problems with Safari browsers in the past, where `click` events didn't bubble all the way up to `document`: http://stackoverflow.com/questions/10165141/jquery-on-and-delegate-doesnt-work-on-ipad – EleventyOne Jan 13 '14 at 08:57
  • When the body is loaded empty and then everything is dynamically loaded, the 'on()' function seems to always be problematic for me, where as the 'live()' keeps working well. The 'on()' function is a total beast to use when everything is dynamic! In such a case, contrary to what @devnull69 stated above, it only works when I do use '$(document)'. – Jeach Mar 03 '14 at 05:22
  • ... which is not contrary to what I stated above :-) – devnull69 Mar 03 '14 at 11:29
  • I didn't know about this `$(document).on('click','#ID',function(){ }` I was trying with the old `$("button").click(function(){}` technique and wasted my most of the day. Thanks alot man! – sohaiby May 23 '14 at 12:27
13
$('#closestStaticParent').on('click', '.dynamicallyCreatedElement' function(){
    console.log('click');
});
elclanrs
  • 92,861
  • 21
  • 134
  • 171
4

Use as delegate()

$('body').on('click', '.dynamicallyCreatedElement', function () {
});

EDIT: Just so everyone gets it, when using delegate() the selector is the first argument and on on() it's the second one.

tbleckert
  • 3,763
  • 4
  • 32
  • 39
2

I have found the need to use this approach with on:

$('#container').on('click','.dynamicallyCreatedElement',function(){
    console.log('click');
});
Barry Kaye
  • 7,682
  • 6
  • 42
  • 64