jquery hover, mouseenter, and mouseleave not working after .appendTo
<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>
