title: jQuery.on('click', 'element', function) simplifying doesn't work
body: <p>I'm trying to make my jQuery code simpler - <code>.on('click', function)</code>, I usually replace by <code>.click(function)</code> and things like that. However, I have a code looking like this:</p>
  
  <pre><code>jQuery(document).on('click', '#lightbox', function() {
      //do something
  });
  </code></pre>
  
  <p>And I don't really understand the structure. I've tried reading on it on jQuery.com and such, but it's explained in a complicated way. My problem is, why isn't that line looking like this..:</p>
  
  <pre><code>jQuery('#lightbox').on('click', function() {
      //do something
  });
  </code></pre>
  
  <p>... so that I could simplify it to this?:</p>
  
  <pre><code>jQuery('#lightbox').click(function() {
      //do something
  });
  </code></pre>
  
  <p>When I try that, it won't work. Why is the selector <code>document</code> instead of the actual element (<code>'#lightbox'</code>) to be clicked, and then it's referenced later in another argument?</p>
  
  <p>Can anyone explain this to me? Just a simple question - I'm not an expert in jQuery (as you may have understood by now), and this isn't a major error either, it's just bugging me a little that I can't have the same <code>click</code> code everywhere (because the simplified code works other places).</p>
  
  <p>(I can upload the whole code and make a Fiddle if necessary, it's only 70 lines, so should be easy)</p>