javascript - 防止元素基于上一类进行动画处理

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 中。如您所见，执行点击函数移除类后，悬停时背景仍然发生变化。

Answer 1

事件处理程序绑定(bind)到一个节点，因此该节点是否不再拥有特定的类名并不重要。您需要手动 .unbind() 那些事件，或者更好的是，使用 jQuerys .off() 方法。

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

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

并使用此调用仅取消绑定(bind)命名空间 .myNamespace 中的任何事件

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