title: jquery: unbind mouseenter and leave won't work
body: <p>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.</p>
  
  <pre><code>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);    
  ...
  </code></pre>
  
  <p>}</p>
  
  <p>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...?</p>