web-dev-qa-db-ja.com

jQueryには.delegate（ 'hover'）のハンドルアウトがありますか？

私は使用しようとしています：

$('mydiv').delegate('hover', function() {  
    $('seconddiv').show();  
}, function() {  
    //For some reason jQuery won't run this line of code  
    $('seconddiv').hide();  
});
jquerydelegateshandler
36
Chris Abrams

jQuery 1.9 +でUser113716の素晴らしい回答が機能しなくなります。これは、疑似イベントhoverはサポートされなくなりました（ アップグレードガイド ）。

また、jQuery 3.0delegate()のバインディングイベントは正式に非推奨になっているため、newon()（ドキュメント） すべてのイベントバインディング目的。

hoverを_mouseenter mouseleave_に置き換えてon()に切り替えることで、user113716のソリューションを簡単に移行できます構文：

_$('mydiv').on('mouseenter mouseleave', 'seconddiv', function(event) {
    $(this).toggle( event.type === 'mouseenter' );  
});
_

問題が単純なtoggleよりも複雑な場合は、2つの別々のイベントをバインドすることをお勧めします。

_$('mydiv').on('mouseenter', 'seconddiv', function( event ) {
    // do something
}).on('mouseleave', 'seconddiv', function( event ) {
    // do something different
});
_

NB：hoverはv1.9で削除され、on()はv1.7で導入されたため、 delegate()を使用するソリューションの真の必要性-しかし、もしあなたがそれを何らかの理由で気に入ったなら;それはまだ（今のところ）あり、仕事をします：

_$('mydiv').delegate('seconddiv','mouseenter mouseleave', function(event) {
    $(this).toggle( event.type === 'mouseenter' );  
});
_
48
DerVO

delegate()（ドキュメント） 、それをコンテナに割り当て、最初の引数はイベントをトリガーする要素です。

また、.delegate()は1つの関数のみを受け入れるため、hoverイベントの場合、_event.type_をテストして show()を判別する必要があります（ドキュメント） または hide()（ドキュメント） 。

_$('.someContainer').delegate('.someTarget','hover', function( event ) {
    if( event.type === 'mouseenter' )  
        $('seconddiv').show();  
    else
        $('seconddiv').hide();  
});
_

表示/非表示の場合、これを書く短い方法は toggle()を使用することです（ドキュメント） 、これはswitch引数を受け入れることができます。ここで、trueはshowを意味し、falseはhideを意味します：

_$('.someContainer').delegate('.someTarget','hover', function( event ) {
    $('seconddiv').toggle( event.type === 'mouseenter' );  
});
_

mouseenterイベントは_jQuery 1.4.3_の時点で報告されることに注意してください。 _1.4.2_を使用している場合は、mouseoverとして報告されます。

編集：

以下のコメントを理解していれば、このようなものになるでしょう（もちろん適切なセレクターを使用します）。

_$('mydiv').delegate('seconddiv','hover', function( event ) {
    $(this).toggle( event.type === 'mouseenter' );  
});
_
43
user113716

OPがdelegateソリューションを望んでいたことを知っています（この質問にぶつかったときもそうでした...）

しかし、その後調査js/jqueryコードなしで同じことを達成できることがわかりました

必要なのは[〜＃〜] css [〜＃〜]のビットです

.someContainer .seconddiv{
    display : none;
}

.someContainer:hover .seconddiv{
    display : block;
}

INMOそれははるかに効率的な/ ligthwheigthソリューション

2
Daniel

.delegate()にはハンドルがありません。また、最初のパラメーターでターゲットとする要素を指定する必要があります。

ただし、次のようなことを試すことができます。

$('table').delegate('tr', 'hover', function() {  
    $(this).toggle();
});
1
Michael Irigoyen

編集：誤った情報が削除されました。

委譲なしでhover()メソッドを使用する場合、作業コードは次のようになります。

_$('#mydiv').hover(function() {  
    $('#seconddiv').show();  
}, function() {  
    $('#seconddiv').hide();  
});
_

2番目に、delegateはイベントハンドラーを子に割り当てるため、最初にセレクターを指定する必要があります。動的に追加された要素にこのイベントハンドラーが存在することを確認する必要がある場合は、mouseenterとmouseleaveを使用した.live()を使用することをお勧めします。

_$('#mydiv').live('mouseenter', function() {  
    $('#seconddiv').show();  
}).live('mouseleave', function() {  
    $('#seconddiv').hide();  
});
_
1
mVChr