Question

我有一个.hover，当它被点击时我需要解除绑定，然后当另一个元素点击时需要再次绑定任何关于如何使它使用以下代码的建议。

$('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

你可以这样解开：

$('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")
});

请注意添加的点击事件。

要重新添加悬停，只需再次调用代码即可。我通常会在下面的示例中使用单独的函数BindHoverEvent多次调用此类函数。

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

Answer 2

您可以使用布尔标志变量并将其更改为true和false，并在悬停函数中检查该标志，然后再执行该函数的其余部分。

OR

另一种方法是取消绑定鼠标输入和鼠标离开。显然，删除了悬停事件：

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

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

Answer 4

我在点击时使用，但它应该大致相同。我在点击时绑定，然后在mouseleve

时取消绑定

$("#langue_box").live("click",function(){
      $(this).addClass("show");
      req_content("langue_box","my_user","langue","show");
      $("#langue_box").bind("mouseleave",function(){
      $(this).removeClass("show");
      req_content("langue_box","my_user","langue","hide");
     $("#langue_box").unbind("mouseleave");
    });
    });

jquery绑定和取消绑定

4 个答案: