2010-03-07 102 views
1

我有一个.hover,当它被点击时,我需要解除绑定,然后当另一个元素被点击需要再次绑定任何建议如何让它与下面的代码一起工作。jquery绑定和解除绑定

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

回答

0

您可以使用布尔标志变量和执行函数的其余部分之前将其更改为真假,并在您悬停功能检查该标志。

另一种方法是解除鼠标输入和鼠标离开。显然,该删除的悬停事件:

$('ul li.port a, ul li.serv a,ul li.cont a, ul li.test a').unbind('mouseenter','mouseleave'); 
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(); }); 
+0

我有工作像这样 $( 'UL李一')。点击(函数(){ \t $(本).unbind( '的mouseenter') .unbind( '鼠标离开'); \t \t \t \t \t \t }); 但当我点击另一个元素,我不能让它再次绑定 – Terry 2010-03-07 07:29:45

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

我用点击,但它应该是差不多的。我结合上单击,然后解除绑定时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"); 
    }); 
    });