title: jQuery: use .on() instead of .live() to attach event handler to $('selector') object
body: <p>I understand that .live() has been removed from jQuery 1.9 and that .on() should be used instead. So far .on() has worked perfectly for me if the selector is a string. For example,</p>
  
  <pre><code>$("a.offsite").live("click", function(){ alert("Goodbye!"); });
  </code></pre>
  
  <p>turned into</p>
  
  <pre><code>$(document).on("click", "a.offsite", function(){ alert("Goodbye!"); });
  </code></pre>
  
  <p>But how do I use .on() for a JQuery selector object (or a collection of objects) as follows?</p>
  
  <pre><code>var jele = $('.nav').find("a.offsite");
  $(jele).live("click", function(){ alert("Goodbye!"); });
  </code></pre>
  
  <p>turned into</p>
  
  <pre><code>var jele = $('.nav').find("a.offsite");
  $(document).on("click", jele, function(){ alert("Goodbye!"); });
  </code></pre>
  
  <p>Is the code above converted correctly? The problem I encounter is other event handlers bound to the same event yet different selector are also executed when the event fires. Hence I suspect this is not the correct way but I can't find any similar example in the official documentation. </p>
  
  <p>I know I could have passed the selector string instead of the jele object into .on() method but in some cases I simply do not have access to the selector string, eg. when the jele object is passed as an argument into the function in which the binding occurs.</p>