2012-06-12 60 views
8

http://api.jquery.com/on/ jQuery的文档提到使用下面的语法(其中附加的事件处理程序只有一个元素)委派事件的好处: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 ...该方法的第二个版本是你想要的。 –

回答

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

As per this signature

。对(事件映射[,选择器] [,数据])

另外,喜欢单个的tagName /类名/ id选择进行委派,因为它们得到优化

+0

是的,这就是我正在寻找:) 你能否澄清你的'喜欢单个tagName/...'评论?我不明白:) – neokio

+0

@neokio在这种情况下,我错了,因为'quickParse'仍然给出了“tr.hoverable”的结果,尽管不是'“.class1.class2”'。这只是一个小费。解释事件代表团如何工作对于一个评论来说太过分了:P – Esailija

+1

这是一个较老的问题/答案,但是因为它帮助了我,所以我认为我会对答案的最后部分进行一些说明:更简单的委派选择器(' .hoverable')通常比复合选择器更好(技术上讲,'td.hoverable')。在OP的情况下,差异是最小的,可能是特异性所必需的。只需要警惕诸如'div + table:has(td.hoverable)'...之类的复杂(和/或非CSS)东西......因为它需要jQuery多次寻找匹配的元素。 – cautionbug