jQuery - 在 DOM 更改后悬停

jQuery - Hover after DOM change

使用 $('#sidebar').toggleClass('small'); 我从 #sidebar 添加 adding/removing 指定的 class。

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

我试图用下面的代码来实现:

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

但这不起作用。

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

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

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

我想你想要更多这样的:

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

打错字再更新,抱歉...

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

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

jsfiddle

来自 fiddle 的代码:

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