"on" not binding to dynamically added elements
<p>My HTML</p>

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

<p>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</p>

<pre><code>$(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($('&lt;a class="more"&gt;...more&lt;/a&gt;'));
});;​
</code></pre>

<p>This does not work. <strong>If i replace "on" by "live" it works</strong>. (but live is depreciated)</p>

<p>I know I can do this</p>

<pre><code>$(document).ready(function() {

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

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

<p>and it works, but my question is...</p>

<p>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. </p>

<p>fiddle: <a href="http://jsfiddle.net/arishlabroo/pRBke/5/" rel="nofollow">http://jsfiddle.net/arishlabroo/pRBke/5/</a></p>
