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 (upgrade guide)。

此外，由于 jQuery 3.0 delegate() 用于绑定事件已正式弃用，因此请使用 new on()^(docs) 进行所有事件绑定。

您可以通过将hover 替换为mouseenter mouseleave 并切换到on() 语法来轻松迁移user113716 的解决方案：

$('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
});

注意： 由于 hover 在 v1.9 中被删除，on() 在 v1.7 中被引入，所以没有真正需要使用 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()^(docs)，它可以接受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。

---

编辑：

如果我在下面理解你的 cmets，你就会有这样的东西（当然使用正确的选择器）。

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

Answer 3

我知道 OP 想要一个 delegate 解决方案（当我遇到这个问题时我也是……）

但经过进一步的调查，我发现完全不用js/jquery代码也可以达到同样的效果

你只需要一点CSS

.someContainer .seconddiv{
    display : none;
}

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

INMO 它是一种更有效/更轻的解决方案

Answer 4

.delegate() 没有句柄。此外，您需要使用第一个参数指定要定位的元素。

不过，您可以尝试这样的方法：

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

Answer 5

编辑：错误信息已删除。

如果您想在没有委托的情况下使用 hover() 方法，工作代码将如下所示：

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

其次，delegate 是给一个孩子分配一个事件处理器，所以需要先指定一个选择器。如果您需要确保动态添加的元素存在此事件处理程序，我更喜欢 .live() 在这种情况下使用 mouseenter 和 mouseleave。

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