2010-03-07 156 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"); 
    }); 
    });