jQuery的解除绑定并重新绑定悬停功能

Question

可能重复：
JQuery Unbind and then bind

我有悬停（的mouseenter，鼠标离开）执行的动画的功能。我试图解开功能（因为我不希望用户与它交互），我点击一个按钮后。这有效，但我遇到的问题是重新绑定悬停功能，以便当用户再次单击该按钮时，动画和悬停效果将重新使用。

不知道这是否是正确的方式来实现这一点，但希望我可以得到一些关于这个问题的帮助。谢谢。

Answer 1

不断解绑和重新绑定通常不是最好的方法。它需要比需要更多的工作。

一种选择是在悬停时在元素上设置一个类，并让其他代码在调用时检查该类的存在。

$('.myelem') 
    .on("mouseenter", function() { 
     $(this).addClass("hovering"); 
    }) 
    .on("mouseleave", function() { 
     $(this).removeClass("hovering"); 
    }) 
    .on("click", function() { 
     if ($(this).hasClass("hovering") === false) { 
      // run the code 
     } 
    }); 

类似的方法是添加了类，但使用事件委托的方法来控制行为，使得选择被定义为在不具备"hovering"类元素的工作。

$('.myelem') 
    .on("mouseenter", function() { 
     $(this).addClass("hovering"); 
    }) 
    .on("mouseleave", function() { 
     $(this).removeClass("hovering"); 
    }); 

$("#container").on("click", ".myelem:not(.hovering)", function() { 
    // run the code 
}); 

Answer 2

下面是使用class名称，以保持该元素的从反应到mouseenter mouseleave多个阻塞上下文的演示：

<div class="highlight"> 
    Hover Me 
    <button type="button">Stop Hoverable</button> 
</div> 
<div class="highlight"> 
    Hover Me 
    <button type="button">Stop Hoverable</button> 
</div> 
<div class="highlight"> 
    Hover Me 
    <button type="button">Stop Hoverable</button> 
</div> 

$('.highlight') 
    .on('mouseenter mouseleave', function(){ 
     if (!$(this).is('canceled')) { 
      $(this).toggleClass('hovered'); 
     } 
    }) 
    .on('click', 'button', function(){ 
     $(this).parent().toggleClass('canceled'); 
    });​ 

http://jsfiddle.net/rRaPB/

这是使得它的工作线：

if (!$(this).is('canceled')) {