title: Difference between jQuery's .on('click') vs .click()
body: <p>Could someone please help me to understand the difference between these two jQuery functions?</p>
  
  <pre><code>$('#theElement').click(function() {
      ... click handler code ...
  });
  </code></pre>
  
  <p>AND</p>
  
  <pre><code>$('body').on('click', '#theElement', function() {
      .... click handler code ...
  });
  </code></pre>
  
  <p>According to <a href="http://api.jquery.com/click/" rel="nofollow">jQuery's documentation</a>, <code>.click()</code> is just a shortcut for <code>.on('click')</code>. And that's the way I've always found it to work. However, I noticed a key difference when building out a prototype today. I could not use <code>.click()</code> when trying to assign an even listener to an element that wasn't yet in the DOM. However, if I did it with <code>$('body').on('click', '#theElement'...</code>, it worked!</p>
  
  <p>Trying to understand why...</p>
  
  <p>Does the <code>.on()</code> have something to do with event capturing that <code>.click()</code> does not?</p>
  
  <p>Thank you to whoever can help point me in the right direction. This is driving me nuts!</p>