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

Using the empty functions won't work. With jQuery you can add as many handlers as you want to a specific event. Adding a new one doesn't delete the previous one. The right way to do it is to use the unbind method, the way you are doing it in the code you've commented out.

As I see it, this code should work. I recommend to use Firebug to see if this code is actually called.