7

我在 $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", ".collection_add_to", function() {
           console.log("MOUSELEAVE");
});

我不清楚事件委托应该从DOM 中应该高于目标元素的节点完成。

4

3 回答 3

11

您应该委托事件，您可以使用on()方法，尝试以下操作：

$(document).on('mouseenter', ".collection_add_to", function() { 
     $(this).find( ".playlists" ).fadeIn("fast"); 
}).on('mouseleave', ".collection_add_to", function() { 
     $(this).find( ".playlists" ).fadeOut("fast"); 
});
于 2012-07-28T22:10:19.480 回答
2

您需要使用事件委托，例如。

$( document ).on('hover', ".collection_add_to", function(e){
    if (e.type == "mouseover") { 
        $(this).find( ".playlists" ).fadeIn("fast"); 
    }
    else if (e.type == "mouseout") { 
        $(this).find( ".playlists" ).fadeOut("fast"); 
    }
);

或者

$( document ).on( "mouseover", ".collection_add_to" ,
    function() { $(this).find( ".playlists" ).fadeIn("fast"); })
  .on( "mouseout", ".collection_add_to", 
    function() { $(this).find( ".playlists" ).fadeOut("fast"); });
于 2012-07-28T22:25:06.423 回答
0

jQuery 只能在原始渲染中起作用，而DOM不是DOM稍后添加的 -element 。

您可以尝试jQuery.delegate()或jQuery.on()。

于 2012-07-28T22:14:29.357 回答