jquery bind and unbind

Question

i have a .hover that when it is clicked i need to unbind and then when another element is click in need to bind again any suggestion on how to get it to work with the following code.

$('ul li.port a, ul li.serv a,ul li.cont a, ul li.test a').hover(
  function() {  
    $('span', this)
      .stop()
      .animate({margin: '15px', left:'+=50',opacity: 1}, 200);
      $(this).stop().animate({opacity: 1}, 200);           
  }, 
  function() {
    $('span', this)
      .stop()
      .animate({margin: '0px',opacity: 0}, 200);
      $(this).stop().animate({opacity: 0},200); 
  }
);

Answer 1

You can use a boolean flag variable and change it to true and false and in your hover functions check the flag before executing the rest of the function.

OR

Another way is to unbind mouse enter and mouse leave. Apparently that removed the hover event:

$('ul li.port a, ul li.serv a,ul li.cont a, ul li.test a').unbind('mouseenter','mouseleave');

Answer 2

You can unbind like this:

$('ul li.port a, ul li.serv a,ul li.cont a, ul li.test a').hover(
  function() {  
    $('span', this)
      .stop()
      .animate({margin: '15px', left:'+=50',opacity: 1}, 200);
      $(this).stop().animate({opacity: 1}, 200);           
  }, 
  function() {
    $('span', this)
      .stop()
      .animate({margin: '0px',opacity: 0}, 200);
      $(this).stop().animate({opacity: 0},200); 
  }
).click(function() {
    $(this).unbind("hover")
});

Notice the added click event.

To re-add the hover, just call the code again. I usually put things like this that will get called multiple times in a separate function, BindHoverEvent in the below example.

$('#otherElement').click(function() { BindHoverEvent(); });

Answer 3

//now whenever hover elm is clicked its event will be removed
$('.hover').one('click',null,_handlerFn);

//bind handler fn hover class when other elm ic clicked
$('.anotherElm').bind('click',null,function(){$('.hover').one('click',null,_handlerFn);});