"on" not binding to dynamically added elements

Question

My HTML

<div>    
    <span  class="more-available" data-completeMessage="This is the complete message you see after clicking more">Hello</span>​
</div>

I add a anchor tag to the end dynamically and then want to attach a click handler to the anchor tag. So I do this

$(document).ready(function() {

   //Attach future proof click event to an anchor tag
   $('a.more').on('click', function() {
      var $parent = $(this).parent();
      $parent.text($parent.data('completemessage'));
   });

   //Add the anchor tag
   $('span.more-available').append($('<a class="more">...more</a>'));
});;​

This does not work. If i replace "on" by "live" it works. (but live is depreciated)

I know I can do this

$(document).ready(function() {

    $('div').on('click','a.more', function() {
        var $parent = $(this).parent();
        $parent.text($parent.data('completemessage'));
    });

    $('span.more-available').append($('<a class="more">...more</a>'));
});;​

and it works, but my question is...

Was I wrong in assuming that "on" provides all the functionality of live? Does "on" not bind to future elements? Is this correct behavior, or am I doing something wrong.

fiddle: http://jsfiddle.net/arishlabroo/pRBke/5/

Answer 1

on() is just a binder that allows for target delegation. It's more of a replacement for delegate() than for live().

$('foo').live('click',fn); is essentially $(document).on('click','foo',fn);

With that in mind, you simply bind the click event to the constant parent wrapper and delegate to your target, like so:

$('span.more-available').on('click', 'a.more', function(){
    var $parent = $(this).parent();
    $parent.text($parent.data('completemessage'));
});

Answer 2

Use it like below,

$('span.more-available').on('click', 'a.more', function () {
   //..your code
});

You cannot just replace replace .live with .on instead you need to bind the handler to the parent element with the specific selector meaning the handle will be delegated when the event is triggered for the matching selector. In above, the you are adding a listener to span.more-available which will execute the handler only when the matching selector a.more is triggered.

In short follow the two steps to replace .live with .on,

1. Find the closest parent elements to which the element will be added dynamically.
2. Bind the handler to parent element with the dynamic elements selector as the 2nd argument.