1

Infinite Scrollを使用してコンテンツを表示していますが、mouseenter/mouseleaveイベントを新しく生成されたアイテムにバインドするのに問題があります。

ページにすでに存在するコンテナに.onをバインドする必要があることはわかっていますが、トグルする現在のjQueryを変更するための構文を理解するのに問題があります。

これは現在のjsです：

$(document).ready(function() {
    $('.grid-box .actions').hide();

    $('.grid-box').on({
        mouseenter: function () {
            $(this).find('.actions').show();
        },
        mouseleave: function () {
            $(this).find('.actions').hide();
        }
    });

});

メインコンテナは＃grid-containerであり、個々のアイテムは.grid-boxです。.grid-boxに出入りするときにアクションが表示/非表示になるように、上記を変更するにはどうすればよいですか？

私はこれに沿って何かが必要だと思います：

$('#grid-container').on('mouseenter mouseleave', '.grid-box', function(e) {

// some action

});
4

2 に答える 2

3

正確には、これはイベント委任と呼ばれ、イベントがバブルアップするのを待ってから、セレクターに基づいてイベントと一致します。要素数のN倍ではなく、1つのハンドラーしか登録されていないため、これははるかに効率的です。また、動的コンテンツが変更されるたびではなく、一度だけバインドする必要があります。

$('#grid-container').on('mouseenter', '.grid-box', function(e) {

    // some action

}).on('mouseleave', '.grid-box', function(e) {

    // some action

});
于 2013-01-07T18:43:31.607 に答える
1

2番目の引数としてのセレクターは引き続き機能します。

$('#grid-container').on({ ...}, '.grid-box');

http://jsfiddle.net/QkFTz/1/

別の方法は、それらを別々にバインドすることです。これは、個人的にはより明確だと思います。

$("#grid-container").on('mouseenter', '.grid-box', function () {})
   .on('mouseleave', '.grid-box', 'function () {});
于 2013-01-07T18:44:26.440 に答える