title: jquery on function and document ready
body: <p>I use the jQuery <a href="http://api.jquery.com/on/" rel="nofollow">on()</a> function to attach an <code>onclick</code> function to a set of anchors in my website as follows:</p>
  
  <pre><code>&lt;ul&gt;
    &lt;li&gt;First &lt;a href='#' title='delete' class="itemDelete"&gt;x&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;Second &lt;a href='http://www.repubblica.it' title='delete' class="itemDelete"&gt;x&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;Third &lt;a href='#' title='delete' class="itemDelete"&gt;x&lt;/a&gt;&lt;/li&gt;
  &lt;/ul&gt;​
  
  &lt;script type="text/javascript"&gt;
  $(document).on('click', '.itemDelete', function(e) {
      $(this).closest('li').remove();
      e.preventDefault();
  });
  &lt;/script&gt;
  </code></pre>
  
  <p>Should I insert the javascript code in the following block? </p>
  
  <pre><code>$(document).ready(function() {
    ...
  });
  </code></pre>
  
  <p>If yes, why?</p>