title: jQuery 'on' not registering in dynamically generated modal popup
body: <p>I was under the impression that jQuery's <a href="http://api.jquery.com/on/" rel="nofollow"><code>on</code></a> event handler was meant to be able to 'listen' for dynamically created elements AND that it was supposed to replace the behavior of <a href="http://api.jquery.com/live/" rel="nofollow"><code>live</code></a>. However, what I have experienced is that using <code>on</code> is not capturing the click event whereas using <code>live</code> is succeeding!</p>
  
  <p>The tricky aspect of my situation is that I am not only dynamically creating content but I'm doing it via an AJAX <code>.get()</code> call, and inserting the resultant HTML into a modal <code>.dialog()</code> jQueryUI popup.</p>
  
  <p>Here is a simplified version of what I was trying to accomplish (wrapped in <code>$(document).ready(...)</code> ):</p>
  
  <pre><code>$.get("getUserDataAjax.php", queryString, function(formToDisplay) {
      $("#dialog").dialog({
          autoOpen: true,
          modal: true,
          buttons...
      }).html(formToDisplay);
  });
  $(".classThatExistsInFormToDisplay").on("click", function() {
      alert("This doesn't get called");
  });
  </code></pre>
  
  <p>From the documentation for <code>on</code> I found this which which was how I was approaching writing my <code>on</code> event:</p>
  
  <pre><code>$("p").on("click", function(){
      alert( $(this).text() );
  });
  </code></pre>
  
  <p>However, for some reason, <code>live</code> will work as I expect -- whereas <code>on</code> is failing me.</p>
  
  <p><strong>This isn't a question for "how can I make it work"</strong> because I have found that <code>on</code> will succeed (capture clicks) if I declare it <em>inside</em> the <code>function(formToDisplay)</code> callback.</p>
  
  <p><strong>My question is:</strong> what is wrong with <code>on</code> that it isn't finding my dynamically created elements within a modal popup? My jQuery instance is jquery-1.7.2. jQueryUI is 1.8.21.</p>
  
  <p>Here are two jsFiddles that approximate the issue. Click the word "Test" in both instances to see the different behavior. The only difference in code is replacing <code>on</code> for <code>live</code>.</p>
  
  <p>Where <a href="http://jsfiddle.net/mNZWH/" rel="nofollow">the click</a> is captured by <code>live</code>.</p>
  
  <p>Where <a href="http://jsfiddle.net/mNZWH/2/" rel="nofollow">the click</a> is NOT captured by <code>on</code> (click 'Test - click me' to see nothing happen).</p>
  
  <p>I realize I may just be using <code>on</code> inappropriately or asking it to do something that was not intended but I want to know <strong>why</strong> it is not working (but if you have something terribly clever, feel free to share). Thanks for your wisdom!</p>
  
  <p><strong>Update / Answer / Solution:</strong></p>
  
  <p>According to user 'undefined', the difference is that <code>on</code> is not delegated all the way from the top of the <code>document</code> object whereas <code>live</code> does/is.</p>
  
  <p>As Claudio mentions, there are portions of the <code>on</code> documentation that reference dynamically created elements <em>and that</em> what you include in the <code>$("")</code> part of the query <strong>needs to exist at runtime</strong>.</p>
  
  <p>Here is my new solution: Capture click events <code>on</code> my modal dialog, which, although it does not have any content when the event is created at runtime, will be able to find my content and element with special class that gets generated later.</p>
  
  <pre><code>$("#dialog").on("click", ".classThatExistsInFormToDisplay", function() {
      ... //(success! Event captured)
  });
  </code></pre>
  
  <p>Thanks so much!</p>