Question

$('.example').hover(
  function () {
    $(this).css('background','red');
  }, 
  function () {
    $(this).css('background','yellow');
  }
);

$('.test').click(function(){
    $(this).css('marginTop','+=20px').removeClass('example');
  }
);

<div class="text example"></div>

虽然类example似乎已被删除，但它的hover操作仍然应用于曾经拥有该类的元素。我该如何防止这种情况？

http://jsfiddle.net/gSfc3/

这里是jsFiddle。如您所见，在执行click函数删除类后，背景在悬停时仍然会发生变化。

Answer 1

事件处理程序绑定到 Node ，因此该节点不再拥有特定的className并不重要。您需要手动或更好地.unbind()这些事件，使用jQuerys .off()方法。

因此，如果您可以确定没有任何其他事件处理程序绑定到该节点，请调用

$(this).css('marginTop','+=20px').removeClass('example').off();

这将从该节点中删除任何事件处理程序。如果您需要具体，可以使用jQuerys 事件命名空间，如此

$('.example').on( 'mouseenter.myNamespace'
   function () {
       $(this).css('background','red');
   }
).on('mouseleave.myNamespace'
   function() {
       $(this).css('background','yellow');
   }
);

并使用此调用仅取消绑定名称空间.myNamespace

内的任何事件

$(this).css('marginTop','+=20px').removeClass('example').off('.myNamespace');

Answer 2

$('.example').unbind('mouseenter').unbind('mouseleave')

在您的代码中，$('.example').hover将mouseenter和mouseleave直接附加到每个元素。

- 或 -

更好的解决方案可能是使用on

的委派

$(document.body).on('mouseenter', '.example', function() { ... });
$(document.body).on('mouseleave', '.example', function() { ... });

使用该代码，删除example类将按预期工作，因为处理程序基于css选择器，而.hover直接附加到元素。

Answer 3

$('.example').live({
    mouseenter:function () {
        $(this).css('background','red');
    },
    mouseleave:function () {
        $(this).css('background','yellow');
    }
});

演示：http://jsfiddle.net/gSfc3/1/

Answer 4

试试这个：

$('.test').hover(
    function () {
        $('.example').css('background','red');
    },
    function () {
        $('.example').css('background','yellow');
    }
);

根据以前的类防止元素动画化

4 个答案: