title: jQuery .on() troubles
body: <p>Ok guys, I've used .on before quite successfully, however, this time it isn't working as expected, because it's not recognizing dynamic elements at all!  </p>
  
  <p>see issue by visiting <a href="http://www.MetalGains.com" rel="nofollow">http://www.MetalGains.com</a> . Click "view demo" and just login with the demo credentials. If you click on a 'pencil" you'll see the edit functionality work.  However, if you add an asset, and then click on the pencil that was added, you'll see it doesn't work.</p>
  
  <p>At some point this line of code is dynamically added: </p>
  
  <pre><code> &lt;div class='edit-item'&gt;&lt;a name='"+$id+"' href='#add-asset-"+status+"' class='edit'&gt;&lt;/a&gt;&lt;/div&gt;
  </code></pre>
  
  <p>the javascript I want to invoke is below. Mind you, it DOES work on page load, just not on anything dynamic. What am I missing?</p>
  
  <pre><code>$(".edit-item .edit").on('click', function(){
      return false;
    }).each(function(){
              $(this).fancybox({
               afterClose: function(){
              //we have to remove this class so that if someone tries to add a new asset it will use the 
              //add script and not the update script
              $(".asset-form").removeClass("update");
              //We need to set the values back to empty so that they aren't prepopulated when someone 
              //tries to add an asset later.
              $(".asset-form :input[name='type']").val("");
              $(".asset-form :input[name='year']").val("");
              $(".asset-form :input[name='quantity']").val("");
              $(".asset-form :input[name='ounces']").val("");
              $(".asset-form :input[name='paid']").val("");
              $(".asset-form :input[name='date']").val("");
              $(".asset-form :input[name='notes']").val("");
  
              //we remove the hidden field that passes the asset id. 
              $(".asset-form :input[name='editId']").remove();
  
  
  
              }//end afterClose
      }); //end edit fancybox
  }); //end each
  </code></pre>
  
  <p>By the way, this works perfectly:</p>
  
  <pre><code>   $(".note-img").on('click', function(){
  return false;
  }).each(function(){
      $(this).fancybox();
      });
  </code></pre>
  
  <p>In relation to this dynamically added content:</p>
  
  <pre><code>   &lt;a href='#note-"+$id+"' class='note-img'&gt;&lt;/a&gt;&lt;div class='note' id='note-"+$id+"'&gt;"+$notes+"&lt;/div&gt;
  </code></pre>