2012-06-12 12 views
8

jQueryのドキュメントhttp://api.jquery.com/on/で(一つだけの要素にイベントハンドラをアタッチ)次の構文を使用して委任 - イベントのメリットを言及:jQueryの構文

$('#mytable').on('click', 'tr.hoverable', function(){ 
    // blah 
}); 

しかし、私は見つけることができません委任されたイベントで複数のイベントを一度に添付するための適切な構文への参照。次のショートカットはありますが、tr.hoverableを委任されたイベントとして使用していますか?

$('#mytable tr.hoverable').on({ 
    mouseenter: function(){ 
     // blah 
    }, 
    mouseleave: function(){ 
     // blah 
    }, 
    click: function(){ 
     // blah 
    } 
}); 

それともこれが唯一のソリューションです...

$('#mytable').on('click', 'tr.hoverable', function(){ 
    // blah 
}).on('mouseenter', 'tr.hoverable', function(){ 
    // blah 
}).on('mouseleave', 'tr.hoverable', function(){ 
    // blah 
}); 

+0

APIをもう一度見てください。メソッドの2番目のバージョンが必要なものです。 –

答えて

10
$('#mytable').on({ 
    mouseenter: function(){ 
     // blah 
    }, 
    mouseleave: function(){ 
     // blah 
    }, 
    click: function(){ 
     // blah 
    } 
}, '.hoverable'); 

As per this signature

.on(イベントマップ[セレクタ] [データ])

また、彼らのように委任するための単一のtagNameを/クラス名/ IDセレクタを好みます最適化する

+0

これは私が探していたものです:) 'single tagName/...'のコメントを明確にすることができますか?私は理解していません:) – neokio

+0

@neokio 'quickParse'が' '。trc .class2" 'ではなく" "tr.hoverable" 'の結果を与えているので、私は間違っています。それはちょっとしたヒントです。 P – Esailija

+1

これは以前の質問/回答ですが、それは私の助けになったので、私は答えの最後の部分を明確にしたいと思っていました。単純な代理セレクタ( ' .hoverable')は通常コンパウンドセレクタよりも優れています(技術的には 'td_overable')。 OPのケースでは、差異は最小であり、おそらく特異性のために必要である。 'div + table:has(td_overable)' ...のような複雑な(そして/またはCSS以外の)ものにはちょっと注意してください。 – cautionbug