title: Difference between using document and element for on event trigger
body: <p>Given these two jquery on event triggers</p>
  
  <pre><code>$(document).on("click", "a[data-trigger='colorbox']",function(e){
  
  $("a[data-trigger='colorbox']").on("click",function(e){
  </code></pre>
  
  <p>I had to click on the anchor tag twice before the colorbox is triggered when I used the first one. For subsequent clicks, it doesnt require a second click to trigger. But for the second one, the colorbox is triggered on the very first click. Is there any difference between the two?</p>
  
  <p>my content for the function is as below</p>
  
  <pre><code>e.preventDefault();
  var currentTarget = $(e.currentTarget);
  currentTarget.colorbox({inline : true, href : currentTarget.data("href")});
  </code></pre>