title: Why can $(document).on(..) be placed anywhere on a page while $(".cl").on(..) has to be placed in the $(document).ready callback or after the <body>?
body: <p>Title question says it all. For the most part, I understand the latter case. When the Javascript is read, the references to the DOM have to mean something, which is why we wrap it in the <code>$(document).ready</code> callback, or shaft our scripts under the <code>&lt;body&gt;</code>. I really don't understand why <code>$(document).on(...)</code> seems to work regardless of position. </p>
  
  <p>Any input would be dope.</p>