jquery: unbind mouseenter and leave won't work

Question

i have a tabbed view and when i hover above unselected tabs i give it the same style as a selected tab. the problem is that when i click it i can't seem to unbind the enter and leave events.

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);    
...

}

as you can u see i also tried to bind it again to an empty function doesn't work either. update: the unbind works only when i click the tab and stay over it until the code finishes. but if i click and pull out it doesn't. i guess it's because the mouseleave event fires in the middle of the click handler. anyone...?

Answer 1

Calling

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

Will simply add another empty event handler. You should unbind them like this;

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