title: Jquery not working on ajax loaded content div
body: <p>I'm having trouble getting a page with jquery and ajax to work.  I'm trying to make this example as simple as possible.  The jquery works when it's on a single page but I cannot get it to work after the call.  </p>
  
  <p>2 pages, first page: </p>
  
  <hr>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
      &lt;script src="../js/jquery-1.8.2.min.js"&gt;&lt;/script&gt;
      &lt;style type='text/css'&gt;
          #one {
              width: 200px;
              height: 200px;
              background: red;
          }
          #two{
              width: 200px;
              height: 200px;
              background: blue;
          }
  
          .show {
              display: none;
              background: yellow;
          }
      &lt;/style&gt;
      &lt;script&gt;
          $(document).ready(function() {
              $("button").click(function() {
                  $("#div1").load("definition.jsp");
              });
          });
      &lt;/script&gt;
      &lt;script type="text/javascript"&gt;
  
          $('#wrapper').on('mouseenter', '.touch', function() {
              $(this).next('.show').fadeIn(800);
          }).on('mouseleave', '.touch', function() {
              $(this).next('.show').delay(800).fadeOut(800);
          });
      &lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
  
      &lt;div id="div1"&gt;&lt;h2&gt;jQuery AJAX Test&lt;/h2&gt;&lt;/div&gt;
      &lt;button&gt;Get External Content&lt;/button&gt;
  
  &lt;/body&gt;
  </code></pre>
  
  <h2></h2>
  
  <p>Second page: </p>
  
  <pre><code>&lt;div id="wrapper"&gt;
  &lt;div id="parent_one"&gt;
      &lt;div class="touch" id="one"&gt;Enter&lt;/div&gt;
      &lt;div class="show"&gt;Works&lt;/div&gt;
  &lt;/div&gt;
  &lt;div id="parent_two"&gt;
      &lt;div class="touch" id="two"&gt;Enter&lt;/div&gt;
      &lt;div class="show"&gt;Second Works&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Any ideas?  Help please!</p>