Question

I need help with binding back after I unbind an element. Basically, I have three anchor elements, and I want to achieve this:

When one of them is clicked, the other two can’t be clicked. Then when the user clicks the close button, I want to bind back the click event for all three links.

To unbind is not a problem, but the binding back is not working. I didn’t post any code because I think that the solution provided will work in general, not just in my case.

Is there maybe any other way to achieve what I want, but not with the use of bind/unbind or on/off?

Edit:

Here is how i have done it.The animated div is called miniContainer.This is the sample for one anchor, but it is the same thing for all three.

       //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

Don’t bind and unbind to do this.

Choose a common ancestor, and use jQuery’s selector based event delegation.

var clickables = $('.clickable');

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

Then to reenable them all, just add the class back in.

clickables.addClass( 'clickable' );

---

If you’re using jQuery 1.7 or later, then use .on() instead since it has event delegation built in.

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

---

Here’s one of the solutions from the comments below.

demo: 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;
}