jquery - 新しいコンテンツが一致しない

Question

AJAX経由でコンテンツを読み込んでいて、いくつかの機能を追加しようとしています。いくつかのコンテンツを表示/非表示にするこのコードがあります:

$('.list li').hover(
            function() { $('.detail').show(); }, 
            function() { $('.detail').hide(); }
        );

これは最初のロードでは正常に機能しますが、AJAX 経由でさらにコンテンツをロードすると機能しません。それを修正する方法はありますか？

score 2 · Accepted Answer

$('.list')現在存在する '.list' アイテムのリストのみを作成します。

まだ存在していない要素にイベントハンドラーを追加するには、onを使用する必要があります。

あなたはこれを行うことができます：

$('body').on('mousenter', '.list li', function({ $('.detail').show()});
$('body').on('mouseleave', '.list li', function({ $('.detail').hide()});

score 1 · Accepted Answer

を使用.onすると、イベントを要素にデリゲートできる.listため、新しい要素を追加しliても意図した機能が損なわれることはありません。

$(".list").on("mouseenter mouseleave", "li", function(e){
    $(".detail").toggle( e.type === "mouseenter" );
});

.detail要素が内にありli、ページ内の別の場所にない場合:

$(".list").on("mouseenter mouseleave", "li", function(e){
    $(".detail", this).toggle( e.type === "mouseenter" );
});

2 に答える 2