How do I "rebind" the click event after unbind('click')?

Question

I have an anchor tag <a class="next">next</a> made into a "button". Sometimes, this tag needs to be hidden if there is nothing new to show. All works fine if I simply hide the button with .hide() and re-display it with .show(). But I wanted to uses .fadeIn() and .fadeOut() instead.

The problem I'm having is that if the user clicks on the button during the fadeOut animation, it can cause problems with the logic I have running the show. The solution I found was to unbind the click event from the button after the original click function begins, and then re-bind it after the animation is complete.

$('a.next').click(function() {
    $(this).unbind('click');
    ...
    // calls some functions, one of which fades out the a.next if needed
    ...
   $(this).bind('click');
}

the last part of the above example does not work. The click event is not actually re-bound to the anchor. does anyone know the correct way to accomplish this?

I'm a self-taught jquery guy, so some of the higher level things like unbind() and bind() are over my head, and the jquery documentation isn't really simple enough for me to understand.

Blase

Answer 1

I would just add a check to see if it's animating first:

$('a.next').click(function() {
    if (!$(this).is(":animated")) {
        // do stuff
    }
});

Convector

Thanks nickf, That worked perfectly. But I'm still curious about how I "rebind" the click event if anyone knows. – Blase

Answer 2

When you rebind the click event, you're starting all over. You need to provide the function that you intend to handle the events. jQuery doesn't remember them for you after you call "unbind."

In this particular case, it's a little more complicated. The problem is that when you start up those animations you're setting into motion a series of actions that are driven by a timer. Thus, unbinding and rebinding the "click" handler inside the click handler itself really won't help anything. What would help (assuming you don't want to solve the problem with the is(":animated") trick) would be to unbind the handler and then rebind in the "finish" callback from your animation.

When you set up the "click" handler in the first place, you can separate the declaration of the function from the call to "click()":

var handler = function() {
  $(this).whatever();
};
$('a.next').click(handler);

Then, should you end up wanting to unbind/rebind, you can repeat that call to "click" and refer to the "handler" function the same way.

Morello

I understand what you're saying, but I don't know how to translate it into code. The function that I want to happen is exactly what click() used to be. How do I code that? – Blase

Well how does "click" get bound in the first place (before you call "unbind")? Oh wait I see - that is the click handler. OK hold on and I'll edit my answer. – Morello

I think I get what you're saying. In your example above "handler" is a function, and I though that when you call a function you need the opening and closing parentheses(). – Blase

You do - but that's not a case where you're calling the function, but instead one where you're referring to the function. You're telling jQuery that that's the function you want to be called when the "click" event happens. In other words, you're referring to the function by name. – Morello

OK, I understand the parentheses thing now. But I still don't know how to "re-build" or "re-create" the old .click() behavior. I know that it would be done in the $(this).whatever(); section of your code sample, but what would be the code to actually make .click() behave exactly as it did before i used .unbind('click'); – Blase

Answer 3

A simpler and short solution

(without using the bind/unbind method)

is to add a class to the object if you want to unbind it then remove this class to rebind ex;

$('#button').click( function(){
   if($(this).hasClass('unbinded')) return;
   //Do somthing
 });

$('#toggle').click(function(){
    $('#button').toggleClass('unbinded');
 });

Afterthought