Is there a better way to attach events to AJAX loaded elements than to use .live()?

Question

With the newer jQuery .click(), .submit(), etc. was replaced by:

$('#foo').on('click', function() {
    //
});

in terms of best practice. Did anything similar happen to .live()? Or is this still the best way to do it?

$('#foo').live('click', function() {
    //
});

See [.on()](http://api.jquery.com/on/) && [.off()](http://api.jquery.com/off/) — SpYk3HH, Nov 30 '12 at 21:54
Voting to close, since this is easily answered by reading the [jQuery docs](http://api.jquery.com/live) — Blazemonger, Nov 30 '12 at 21:57
@Blazemonger: If you believe this question does not show any research effort than that is what the downvote feature is for, according to it's tool-tip anyway. Lack of research is not a good reason to close question in my opinion or we would be closing nearly all basic questions. I'm sure though that several duplicates can be found of this question and that would be a valid reason for closing a question. The current 2 votes on closing for reasons of the question being to localized is not the correct reason though, nor is lack of research. — Nope, Dec 01 '12 at 01:43

score 3 · Answer 1 · edited Jun 20 '20 at 09:12

3

Delegation using .on() is the correct way instead of using live

$('staticAncestorElement').on('click','#foo',function(){

});

as you can see from the jQuery live() documents

$(selector).live(events, data, handler); // jQuery 1.3+

$(document).delegate(selector, events, data, handler); // jQuery 1.4.3+

$(document).on(events, selector, data, handler); // jQuery 1.7+

edited Jun 20 '20 at 09:12

Community

1
1

answered Nov 30 '12 at 21:54

wirey00

33,517
7
54
65

`staticAncestorElement`, rather, since it's not required to be a direct parent. – Šime Vidas Nov 30 '12 at 22:05
@ŠimeVidas True as Parent can be taken the wrong way - changing it – wirey00 Nov 30 '12 at 22:06

score 3 · Accepted Answer · edited May 23 '17 at 10:24

On() has all the abilities of all other bindings. To bind to dynamic elements you can use on() like this:

$(document).on('click', '#foo', function() {
    //
});

Preferably you want to use a close static element instead of document.

To quote from another post of mine regarding the many binding methods jQuery has on offer:

bind() was added in 1.0, live() in 1.3, delegate() in 1.4.2 and on() in 1.7.

As of 1.7 on() is the preferred use and live() is deprecated and not recommended at all. If you are using 1.3 use bind() instead of live() and as of 1.4.2 use delegate() instead of live() and as of 1.7 use on() instead of any of the others.

You can see the full post here, which also list the many drawbacks of live() and why it should not be used any more in jQuery 1.7 or later.

score 1 · Answer 3 · answered Nov 30 '12 at 21:55

With the newer jQuery .click(), .submit(), etc. was replaced by

They weren't replaced. click and submit still work but now they are shortcuts to on. The methods that are deprecated are bind and live. Now you can do this to delegate events:

$(closestStaticParent).on('click', 'element', function(){ ... })

SpYk3HH · Answer 4 · 2012-11-30T22:05:56.377

1

.click was not replaced with .on("click". Read the documentation.

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

.live was replaced by .on and .off.

Other functions like .click will continue to work as expected

.live()
.on()
.off() (newer version of .die())

edited Nov 30 '12 at 22:05

answered Nov 30 '12 at 21:55

SpYk3HH

22,272
11
70
81

If you got `off`, you might as well list [die](http://api.jquery.com/die/) for completness :) – Nope Nov 30 '12 at 22:04

Is there a better way to attach events to AJAX loaded elements than to use .live()?

4 Answers4