在点击内部解除绑定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() {...}); 

代替