Question

There are some situations that the .on() event method doesn’t fire but the .live() does fire.
However, As of jQuery 1.7, the .live() method is deprecated.
So it’s better to use .on() method to attach event handlers.

So here is the problem – http://jsfiddle.net/rGRdT/2/
You can see that the .one() method is called once when you click the button, but when you click the second button that is just created, the .on() will not be called.

$('#button2').on('click', function() {
    $('div').append('<input type="button" value="add2" id="button3" />'); 
});

You can see here – http://jsfiddle.net/GFCt9/
That the .live() method is called perfectly when you click the second button.

$('#button2').live('click', function() {
    $('div').append('<input type="button" value="add2" id="button3" />');
});​

So how can I use the .on() method so it will work like .live() method in the example above?

Answer 1

$('#button2').live('click', function() {

isn’t equivalent to

$('#button2').on('click', function() {

but to

$(document).on('click', '#button2', function() { // you may replace document with something more precise but existing

If your element with id button2 doesn’t exist when you call $('#button2').on, you’re not binding anything. This is very different from live. You must call on on a non empty collection.

Sample