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は、後で追加される-elementを使用DOMせずに、レンダリングされた元のファイルでのみ機能します。DOM

jQuery.delegate（）またはjQuery.on（ ）を試すことができます。

于 2012-07-28T22:14:29.357 に答える