在jQuery中取消绑定后如何绑定？

Question

我在取消绑定元素后需要帮助我重新绑定。基本上，我有三个锚元素，我想实现这个：

当其中一个被点击时，其他两个不能被点击。然后当用户点击关闭按钮时，我想绑定所有三个链接的点击事件。

解绑没问题，但是绑定回来就不行了。我没有发布任何代码，因为我认为提供的解决方案一般都可以工作，而不仅仅是我的情况。

是否有任何其他方法可以实现我想要的，但不是使用绑定/取消绑定或开/关？

编辑：

我是这样做的。动画 div 称为 miniContainer。这是一个锚点的示例，但三个锚点都是一样的。

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

---

这是来自以下 cmets 的解决方案之一。

演示：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;
});

如果您的关闭按钮是动态生成的，您将需要使用 live、delegate 或 on，而不是速记单击功能...