在.appendTo之后,jquery悬停,mouseenter和mouseleave无法正常工作

我在$document.ready()中绑定了mouseenter和mouseleave事件,如下所示：

$( ".collection_add_to" ).hover(
    function() { $(this).find( ".playlists" ).fadeIn("fast"); },function() { $(this).find( ".playlists" ).fadeOut("fast"); }
);

用户可以请求更多具有“.collection_add_to”类的搜索结果.它们会附加到现有的搜索结果中,如下所示：

$.get("context/collection/",$data,function(result) {
    $( result ).appendTo( "#collection_song_items" );
    // rebind_hover();
});

我加倍检查返回的结果是否为“.collection_add_to”类.我还尝试在额外的例程中重新绑定它：

function rebind_hover() {
    $( ".collection_add_to" ).hover(
        function() { $(this).find( ".playlists" ).fadeIn("fast"); },function() { $(this).find( ".playlists" ).fadeOut("fast"); }
    );
}

没有任何效果,悬停事件不再适用于新添加的项目.使用$load()函数时,它可以正常工作.如何在动态加载的内容上再次使用悬停事件,尤其是在使用append()或appendTo()添加内容时？

编辑

感谢irc和Raminson的sacho：

$(document).on("mouseenter",".collection_add_to",function() {
           console.log("MOUSEENTER");
});
$(document).on("mouseleave",function() {
           console.log("MOUSELEAVE");
});

我不清楚事件委托应该从一个节点来完成,该节点应该在DOM中比目标元素更高.

解决方法

你应该委托事件,你可以使用on()方法,尝试以下方法：

$(document).on('mouseenter',function() { 
     $(this).find( ".playlists" ).fadeIn("fast"); 
}).on('mouseleave',function() { 
     $(this).find( ".playlists" ).fadeOut("fast"); 
});