6

この古い jQuery コードを v1.7 に結合するにはどうすればよい.on()ですか?

v1.3 .live():

    $('#results tbody tr').live({
    mouseenter:
       function () { $(this).find('.popup').show(); },
    mouseleave:
       function () { $(this).find('.popup').hide(); }
    });

v1.7 .on():

$('#results tbody').on('mouseenter', 'tr', function () {
    $(this).find('.popup').show();
});
$('#results tbody').on('mouseleave', 'tr', function () {
    $(this).find('.popup').hide();
});

両方のイベント ハンドラーを 1 つの呼び出しに渡したいのです.on()が、華麗なイベ​​ント デリゲーションを維持する.on()ことができます。

ありがとうございました！

4

4 に答える 4

10

イベントマップを最初のパラメータとして渡すことができます:

$('#results tbody').on({
    'mouseenter' : function () {
        $(this).find('.popup').show();
     },
    'mouseleave' : function () {
        $(this).find('.popup').hide();
    }
}, 'tr');

jQuery ドキュメント:

.on( events-map [, selector] [, data] ) ,
events-map文字列キーがスペースで区切られた 1 つ以上のイベント タイプとオプションの名前空間を表し、値が呼び出されるハンドラー関数を表すマップそのイベント）。

于 2012-05-17T13:51:32.597 に答える
3

最初の例のように、両方のイベント ハンドラーを 1 つのオブジェクトに渡したいだけです。

この場合、次のように、2 つのイベントを一緒にアタッチし、ハンドラー自体でそれらを区別できます。

$('#results tbody').on('mouseenter mouseleave', 'tr', function (e) {
    if (e.type == "mouseenter") {
        $(this).find('.popup').show();
    }
    else {
        $(this).find('.popup').hide();
    }
});
于 2012-05-17T13:51:15.040 に答える
1

使用される形式は、ライブのドキュメントで指定されています

$(document).on({...events...}, selector, data);

-また-

$(document).on(event, selector, data, callback);

1.7以降の関数のコードは、live単なるパススルー関数になりました。

live: function( types, data, fn ) {
    jQuery( this.context ).on( types, this.selector, data, fn );
    return this;
}
于 2012-05-17T13:49:03.393 に答える
0

最初の例を取り、に変更liveするonだけで十分です。

 $('#results tbody tr').on({
mouseenter:
   function () { $(this).find('.popup').show(); },
mouseleave:
   function () { $(this).find('.popup').hide(); }
})

参照: http://api.jquery.com/on/#example-6

于 2012-05-17T13:52:02.443 に答える