What to use instead of .live() for elements added after event declaration (jQuery v1.9)

Question

Possible Duplicate:
jquery: on vs live

I used to use .live() method when I have dynamically created objects by javascript, because at the time I declare the event listener to a click for instance, the element isn't in the DOM yet, so when the element is added dynamically by an user action, the .live('click') method would do the trick.

But, in jQuery v1.9.0, there's no live method, the documentation advises to use .on() instead, but that doesn't work in this kind of example ...

Here is a fiddle with an example: http://jsfiddle.net/promatik/C3DLQ/.

It will only work if you set the jQuery to 1.8.3 or the Migrate Plugin.

$("#create").click(function(){
    $('body').append($('<div id="test" class="btn">click me<div>'));
});

$("#test").on("click", function(){
    alert("worked!"); 
});

I actually tested other methods like delegate() and bind(), but none worked.

http://stackoverflow.com/questions/11686326/jquery-live-vs-on-in-1-7 — undefined, Jan 24 '13 at 02:41
http://stackoverflow.com/questions/8042576/whats-the-difference-between-jquery-live-and-on — undefined, Jan 24 '13 at 02:43
http://stackoverflow.com/questions/14354040/jquery-1-9-live-is-not-a-function — undefined, Jan 24 '13 at 02:44
Hi @undefined, those questions, doesn't answer to my question... — António Almeida, Jan 24 '13 at 02:46

John Koerner · Accepted Answer · 2013-01-24T02:49:11.793

3

The reason it is not working is that test did not exist when the javascript first ran. If you attach the on event to the parent element and filter it to #test, then it will work as expected.

$("body").on("click", "#test", function(){
    alert("worked!"); 
});

Updated fiddle: http://jsfiddle.net/C3DLQ/4/

edited Jan 24 '13 at 02:49

answered Jan 24 '13 at 02:42

John Koerner

35,668
7
74
128

Korner, but thats the point! I want to insert the element after the event declaration... dynamicly, with live, that is possible ... but live isn't avaiable anymore ... – António Almeida Jan 24 '13 at 02:47
So you attach the event handler to the parent and filter it, as I have done in this exmaple. – John Koerner Jan 24 '13 at 02:48
1

I updated the code a bit to show you could attach the event to the body (instead of the document), but filter it to the selector of the second parameter `#test` – John Koerner Jan 24 '13 at 02:51
Sorry, didn't understand at first, I get it now, thanks – António Almeida Jan 24 '13 at 02:51
You should not use multiple IDs in one document. This is very bad practice. – Austin Brunkhorst Jan 24 '13 at 02:55
@AustinBrunkhorst I agree 100%. If you will be appending multiples, generate unique ids or don't use ids at all and use a class to reference the items. – John Koerner Jan 24 '13 at 02:57

score 2 · Answer 2 · answered Jan 24 '13 at 02:40

You can attach it to the document and specify a selector, like so:

$(document).on("click", "#test", function(){
    alert("worked!"); 
});

The #test element wasn't returned on your initial selector query, so no event was attached. Attaching it to the document element and specifying a selector to use will make it work when new elements are added to the DOM.

Austin Brunkhorst · Answer 3 · 2013-01-24T02:46:48.520

1

The reason it's not working is because you are using multiple instances of one ID. Use classes instead when selecting more than one element.

$('#create').click(function() {
    $('body').append($('<div class="btn test">click me<div>'));
});

Also you need to bind the click to the document and filter the element to .test like this.

$(document).on('click', '.test', function() {
    alert('worked!'); 
});

edited Jan 24 '13 at 02:46

answered Jan 24 '13 at 02:41

Austin Brunkhorst

18,784
5
40
56

I changed the fiddle, and that's not the solution ... – António Almeida Jan 24 '13 at 02:44

What to use instead of .live() for elements added after event declaration (jQuery v1.9)

3 Answers3