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.

Answer 1

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/