title: jquery hover, mouseenter, and mouseleave not working after .appendTo
body: <p>I bind the mouseenter and mouseleave event in $document.ready() like this:</p>
  
  <pre><code>$( ".collection_add_to" ).hover(
      function() { $(this).find( ".playlists" ).fadeIn("fast"); },
      function() { $(this).find( ".playlists" ).fadeOut("fast"); }
  );
  </code></pre>
  
  <p>The user can request more search results which have the class ".collection_add_to". They are appended to the existing search results like this:</p>
  
  <pre><code>$.get("context/collection/", $data, function(result) {
      $( result ).appendTo( "#collection_song_items" );
      // rebind_hover();
  });
  </code></pre>
  
  <p>I doubled checked that the returned results have the class ".collection_add_to". I also tried to rebind this in extra routine:</p>
  
  <pre><code>function rebind_hover() {
      $( ".collection_add_to" ).hover(
          function() { $(this).find( ".playlists" ).fadeIn("fast"); },
          function() { $(this).find( ".playlists" ).fadeOut("fast"); }
      );
  }
  </code></pre>
  
  <p>Nothing worked, the hover event is not working anymore on the newly added items. When using the $load() function, it works. How can I make the hover-event working again on dynamically loaded content, especially when content is added with append() or appendTo()?</p>
  
  <p><strong>edit</strong></p>
  
  <p>Thanks to sacho on irc and Raminson:</p>
  
  <pre><code>$(document).on("mouseenter", ".collection_add_to", function() {
             console.log("MOUSEENTER");
  });
  $(document).on("mouseleave", ".collection_add_to", function() {
             console.log("MOUSELEAVE");
  });
  </code></pre>
  
  <p>It was not clear to me that event delegation should be done from a <strong>node which should be higher in the DOM</strong> than the target element.</p>