Javascript jQuery-DOM更改后悬停

带有

$（'#边栏'）。toggleClass（'small'）

Im从

#侧栏

添加/删除指定类

当

#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悬停方法来执行此操作：

更新： 对不起，我注意到了另一件事。。。最初设置事件处理程序时，#侧栏是否有css标记？按照编写代码的方式，如果没有，它将尝试附加到元素$（“#sidebar.small”），因此如果css标记不在那里，它将不会附加到任何东西

我想你更想要这样：

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

---

再次更新输入错误，抱歉…

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

解决方案是在添加类时重新绑定相应的处理程序

来自小提琴的代码：

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

$（'#foo'）。单击（函数（）{
$('')
.text（'A Span'）
.appendTo（“#container”）；
});
$（'#bar'）。单击（函数（）{
$（'span'）.first（）.toggleClass（'small'）；
bindhaver（）；
})
函数bindhaver（）{
$（'span.small'）.unbind（'hover'）；//避免重新绑定某些内容
$（'span.small'）.hover（函数（）{
警报（'a'）
});
}
bindhaver（）；

我认为，要使其正常工作，您只需在$（“#bar”）上添加bindHover。当它不存在时单击。。。否则，您将添加额外的绑定，您将收到超过1个警报。但老实说，我的答案太复杂了。我认为OP需要为动态元素做这个。对于一个始终存在的

#侧栏

div，更好的解决方案是绑定一次hover或mouseenter，并在处理程序中测试类，如您在回答中所示。我假设基于标识符侧栏没有多个，但我也使用了您的模式来处理动态元素，所以是的，这真的取决于OP的目的。