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')) {