jquery:解除mouseenter和leave的绑定(bind)不起作用

Question

我有一个选项卡式 View ，当我将鼠标悬停在未选定的选项卡上方时，我为其指定与选定选项卡相同的样式。问题是，当我单击它时，我似乎无法解除输入和离开事件的绑定(bind)。

function DocReady() {
    $("." + TAB_OFF_CLASS).click(changeCategory);
    $("." + TAB_OFF_CLASS).mouseenter(onCategoryOver);
    $("." + TAB_OFF_CLASS).mouseleave(onCategoryOut);
}

function onCategoryOver() {
    $(this).removeClass(TAB_OFF_CLASS).addClass(TAB_ON_CLASS);
}
function onCategoryOut() {
    $(this).removeClass(TAB_ON_CLASS).addClass(TAB_OFF_CLASS);
}

function changeCategory() {

var catTab = $(this);
var catName = catTab.find('#catName').html();
var id = catTab.attr('categoryID');
catTab.unbind('click');
catTab.unbind('mouseenter', onCategoryOver);
catTab.unbind('mouseleave', onCategoryOut);
catTab.removeClass(TAB_OFF_CLASS).addClass(TAB_ON_CLASS);    
...

}

正如你所看到的，我也尝试将它再次绑定(bind)到一个空函数也不起作用。更新:仅当我单击选项卡并停留在其上直到代码完成时，取消绑定(bind)才起作​​用。但如果我点击并拉出它却不会。我猜这是因为 mouseleave 事件在单击处理程序中间触发。有人...？

Answer 1

调用

catTab.mouseenter(function(){});
catTab.mouseleave(function(){});

将简单地添加另一个空事件处理程序。你应该像这样解除它们的绑定(bind)；

catTab.unbind("mouseenter");
catTab.unbind("mouseleave");