Question

我在$ 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 中高于目标元素。

Answer 1

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

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

Answer 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"); });

Answer 3

jQuery只能在原始渲染DOM中使用DOM而不是{{1}} - 稍后会添加元素。

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

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

3 个答案: