Question

当我点击同一个元素时，我想删除基于类的悬停效果。这是代码：

<div class="myClass"> some text </div>

和Javascript：

$('.myClass').on('click', function(e) {
    $(this).removeClass('myClass');
    alert('myClass is removed from the element but the hover effect still work. i dont want that i want the hover effect to work just if the element has .myClass ');
})

这是jsfiddle

Answer 1

该类仅用于标识bind和event的元素，即mouseenter和mouseleave事件。这就是为什么删除课程什么都不做;这是你要删除的事件。这将删除这些事件：

$(this).unbind('mouseenter mouseleave');

Answer 2

作为Andrew Cheong's excellent answer的替代方法，您还可以使用.on()方法的可选选择器来指定触发事件的元素，如下所示：

$(document.body).on('mouseenter', '.myClass', function () {
    $(this).css('color','red');
}).on('mouseleave', '.myClass', function () {
    $(this).css('color','black');
});

$('.myClass').on('click', function(e) {
    $(this).removeClass('myClass');
    alert('myClass is removed from the element but the hover effect still work. i dont want that i want the hover effect to work just if the element has .myClass ');
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="myClass"> some text </div>

虽然这种操作更接近您所考虑的.hover()方法，但可能会产生不良副作用。

Answer 3

unbind是一个很酷的选项，但你也可以使用jQuery的.off()函数，如下所示：

('.myClass').on('click', function(e) {

    $('.myClass').off('mouseleave mouseleave');

});

它会删除有关mouseenter和mouseleave事件的相关事件处理程序。

更新了Fiddle

即使我删除了类名，Jquery元素悬停仍然有效

3 个答案: