jQuery - DOM更改后悬停

Posted 2023-05-08

【中文标题】jQuery - DOM更改后悬停

【英文标题】：jQuery - Hover after DOM change

【发布时间】：2015-06-11 09:38:29

【问题描述】：

使用$('#sidebar').toggleClass('small'); 我正在添加从#sidebar 添加/删除指定的类。

当#sidebar 具有类small 时，当用户将鼠标悬停在#sidebar.small 上时，我应该能够执行其他操作。

我已经尝试使用下面的代码来实现：

$("#sidebar.small").on(
    mouseenter: function () 
        alert(1);  //doesn't work
,
    mouseleave: function () 
        //stuff to do on mouse leave
    
);

但这不起作用。

我应该如何在更改的 DOM 元素上执行悬停功能？

【参考方案1】：

您应该可以使用 jquery hover 方法来执行此操作：https://api.jquery.com/hover/

更新： 抱歉注意到另一件事...当您最初设置事件处理程序时，#sidebar 是否具有 css 标签？您的代码的编写方式，如果没有，它将尝试附加到元素 $("#sidebar.small")，因此如果 css 标签不存在，它将不会附加到任何东西。

我想你想要更多这样的：

$("#sidebar").on(
    mouseenter: function() 
       if($('#sidebar').hasClass('small')) 
           alert(1);
       
    
);

再次更新错字，抱歉...

【参考方案2】：

Jquery 仅在绑定时绑定找到的元素的处理程序。

解决方案是在添加类时重新绑定适当的处理程序。

jsfiddle

小提琴代码：

$('#foo').click(function()
    $('<span></span>')
    .text('A Span')
    .appendTo('#container');
);

$('#bar').click(function()
   $('span').first().toggleClass('small');
   bindHover();    
)

function bindHover()
    $('span.small').unbind('hover'); // Avoid re-binding something
    $('span.small').hover(function()
        alert('a')
    );


bindHover();

【讨论】：

我认为要使其正常工作，您只需要在 $('#bar').click 上添加 bindHover 不存在时...否则您将添加其他绑定并且您'将收到超过 1 个警报。

但老实说，我的回答太复杂了。我认为 OP 需要为动态元素执行此操作。对于单个始终存在的#sidebar div，更好的解决方案是绑定一次以悬停或 mouseenter，并在处理程序中测试该类，就像您在答案中所展示的那样。

我假设基于标识符侧边栏没有多个，但我也将您的模式用于动态元素，所以是的，这真的取决于 OP 的用途。