jQuery是否有.delegate('hover')的句柄？

Question

我正在尝试使用:

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

Answer 1

User113716的优秀答案将不再适用于jQuery 1.9+,因为不再支持伪事件 hover(升级指南).

此外,由于绑定事件的jQuery 3.0 delegate()已被正式弃用,因此请将新 on()^(docs)用于所有事件绑定目的.

您可以轻松地迁移user113716通过替换的解决方案hover与mouseenter mouseleave和切换到on()语法:

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

如果您的问题比简单更复杂toggle,我建议绑定两个单独的事件:

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

注意:自从hoverv1.9中删除并在v1.7 on()中引入以来,没有真正需要使用的解决方案delegate()- 但如果你喜欢它的原因; 它仍然存在(现在)并完成工作:

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

Answer 2

使用delegate()^(docs),将其分配给容器,第一个参数是应该触发事件的元素.

此外,.delegate()只接受一个函数,因此对于hover事件,您需要测试event.type以确定show()^(docs) 或hide()^(docs).

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

对于显示/隐藏,写这个较短的方式是使用toggle()^(文档),它可以接受一个开关参数,其中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' );  
});