如何在jQuery中取消綁定後進行綁定？

Question

我在取消綁定元素後需要綁定的幫助。基本上，我有三個錨元素，我想實現這一點：

當其中一個被點擊時，其他兩個不能被點擊。然後當用戶點擊關閉按鈕時，我想要綁定所有三個鏈接的點擊事件。

解除綁定不是問題，但是綁定不起作用。我沒有發佈任何代碼，因爲我認爲所提供的解決方案通常會起作用，而不僅僅是我的情況。

是否有其他方法可以實現我想要的，但不能使用bind/unbind或on/off？

編輯：

下面是我做後援動畫的div被稱爲miniContainer.This是一個錨的樣本，但它是所有三個同樣的事情。

 //First Link   
krug1Link.click(function(element){ 
    if(miniContainer.hasClass('animirano')){ 
     return false; 
    }; 
    element.preventDefault(); 
    miniContainer.stop().animate({ height:360 },{duration:500,easing: 'easeOutBack'}); 
    miniTekst1.animate({opacity:'1'},1200); 
    polaroidMali.animate({opacity:'1'},1200); 
    miniContainer.addClass('animirano'); 
}); 

//Close Mini Container 
close.click(function(element){ 
    miniTekst1.animate({opacity:'0'},1200); 
    miniTekst2.animate({opacity:'0'},1200); 
    polaroidMali.animate({opacity:'0'},1200); 
    polaroidMali2.animate({opacity:'0'},1200); 
    miniContainer.animate({marginTop: 10, height:1},{duration:600,easing: 'easeInBack'}); 
    miniContainer.removeClass('animirano'); 
}); 

Answer 1

不要bind和unbind做到這一點。

選擇一個共同的祖先，並使用jQuery的基於選擇器的事件委託。

var clickables = $('.clickable'); 

$('#some_ancestor').delegate('.clickable', 'click', function() { 
    // to disable the others 
    clickables.not(this).removeClass('clickable'); 
}); 

然後重新啓用它們，只需添加類回去。

clickables.addClass('clickable'); 

---

如果你正在使用jQuery 1.7或更高版本，然後用.on()，而不是因爲它的事件代表團建成英寸

$('#some_ancestor').on('click', '.clickable', function() { 
    // to disable the others 
    clickables.not(this).removeClass('clickable'); 
}); 

---

以下是下面評論的解決方案之一。

演示：http://jsfiddle.net/c9Ydy/3/

<ul id="container"> 
    <li id="link1" class="box clickable"> 
     <a href="#">LINK ONE</a> 
    </li> 
    <li id="link2" class="box clickable"> 
     <a href="#">LINK TWO</a> 
    </li> 
    <li id="link3" class="box clickable"> 
     <a href="#">LINK THREE</a> 
    </li> 
</ul> 

<div id="content_display"> 
    <button>CLOSE</button> 
    <p id="link1_content">THIS IS THE CONTENT FOR THE FIRST LINK.</p> 
    <p id="link2_content">THIS ONE IS FOR THE SECOND LINK</p> 
    <p id="link3_content">AND THIS IS THE THIRD LINK</p> 
</div> 

JS

var clickables = $('.clickable'), 
    display = $('#content_display'), 

    $content, // remember the one that was clicked 
    display_animation_enabled = false; 

$('#container').delegate('.clickable', 'click', function() { 

    display_animation_enabled = true; 
    clickables.removeClass('clickable'); 

    if($content) { $content.hide(); } 

    $content = $('#' + this.id + '_content').show(); 
    cycle(); 
}); 
display.find('p').hide(); 
display.find('button').click(function() { 
    display_animation_enabled = false; 
    clickables.addClass('clickable'); 
    if($content) { $content.hide(); } 
}); 
function cycle() { 
    if(display_animation_enabled) { 
     display.animate({width:300,height:300}) 
       .animate({width:200,height:200}, cycle); 
    } 
} 

CSS

div.box { 
    width: 50px; 
    height: 50px; 
    background: yellow; 
    margin: 10px; 
} 

div.clickable { 
    background: orange; 
} 

#content_display { 
    width: 200px; 
    height: 200px; 
    background: yellow; 
} 
#content_display > p { 
    margin: 10px; 
    color: blue; 
} 

Answer 2

看起來好像你需要解除綁定/重新綁定才能達到預期的效果。只需使用一面旗幟。即

//This is a variable that you will use to check whether any of the anchors have been 
//clicked. If this flag is set to true, then the click handler below will not 
//perform any action when the other anchors are clicked. When this flag is set to false 
//the click handler will take the desired action. From your description it sounds like 
//the action might be opening a window of some sort... 
var buttonClicked = false; 

//Bind a click handler to each anchor 
$('#anchor-1').click(function(){ 

    //check to see if one of the anchors has already been clicked. If none have been 
    //clicked take execute the code inside the if statement. 
    if(!buttonClicked){ 

      //set the flag to true, indicating that one of the anchors has been clicked. 
      buttonClicked = true; 

      //Here you would open your window or popup... 
      //i.e. popup.open(); 
    } 
}); 

$('#anchor-2').click(function(){ 
    if(!buttonClicked){ 
      //logic for second anchor.. 
    } 
}); 

//Bind a click handler to the close button you mentioned 
$('.close-button').click(function(){ 

    //Close the window or popup here... 
    //i.e. popup.close(); 

    //set the flag to false, which will allow all of the anchors to be clicked. 
    buttonClicked = false; 
}); 

如果是動態生成的關閉按鈕，你將需要使用現場，委託，或對，而不是速記點擊功能...