在點擊內部解除綁定jQuery懸停事件處理程序

Question

我有旋轉的jQuery選項卡，當您將鼠標懸停在它們上面時要暫停，並在單擊時停止旋轉。

但是，雖然暫停工作正常，我不能解除懸停事件（即使unbinding mouseenter和mouseleave單獨）。

我在這裏用兩種不同的方法創建了兩個jsfiddles，它們都有相同的問題。

http://jsfiddle.net/bdrvC/15/

function tab_hover_in() { 
     $(this).tabs('rotate', 0, false); 
} 
function tab_hover_out() { 
     $(this).tabs('rotate', 3000, false); 
} 
function tab_click() { 
     $(this).tabs('rotate', 0, false); 
     $(this).unbind('mouseenter',tab_hover_in); 
     $(this).unbind('mouseleave',tab_hover_out); 
     event.preventDefault(); 
} 

$('.tabs-rotate').tabs({ 
     selected: 'tabs-1' 
}).tabs('rotate', 3000, false); 

$('.tabs-rotate').bind({ 
     'click': tab_click, 
     'mouseenter': tab_hover_in, 
     'mouseleave': tab_hover_out 
}); 

http://jsfiddle.net/bdrvC/16/

$('.tabs-rotate').tabs({ 
    selected: 'tabs-1' 
}).tabs('rotate', 3000, false); 

$('.tabs-rotate').hover(function() { 
    $(this).tabs('rotate', 0, false); 
    }, function() { 
    $(this).tabs('rotate', 3000, false); 
}); 
$('.tabs-rotate').click(function() { 

    $(this).tabs('rotate', 0, false); 
    $(this).unbind('mouseleave'); 

}); 

任何人都可以解釋爲什麼轉動，甚至點擊後繼續？

非常感謝！

Answer 1

點擊事件不獲取綁定到適當的元素......你可以使用

$('.ui-tabs-nav li a').click(function() {...}); 

代替