Question

here is the code: http://jsfiddle.net/4WyPq/

So basically when I click ‘button1’ it animates then disables the button, after that I need to press button2 and enable the ‘button1’ event so I press again ‘button1’ it should do the same event.

Answer 1

When you bind a click event to a link, you HAVE to include the click handler function.

$(this).bind('click');

does not do anything because there is no handler function. You would have to pass the click handler function again if you want to rebind it. You could do that by breaking the click handler out into it’s own local function and then using that function each time you bind the click event. You could do that like this:

function bindA1(force) {
    var a1 = $('.a1');
    if (force || a1.hasClass("disabled")) {
        a1.click(function() {
            $(this)
                .addClass("disabled")
                .unbind("click")
                .animate({"top": "+=50px"}, "slow");
            return(false);
        }).removeClass("disabled");
    }
}

bindA1(true);

$('.a2').click(function () {
    bindA1();
    return(false);
});

Working demo here: http://jsfiddle.net/jfriend00/3kjaR/

If you really intend to enable and disable the handlers for links like this, it may be easier to just set a property that you check rather than actually remove the event handlers.

You could use a flag like this:

$('.a1').click(function (){
    if (!$(this).data("disabled")) {
        $('.a1').animate({"top": "+=50px"}, "slow");
        $(this).data("disabled", true);
    }
});

$('.a2').click(function (){
    $(".a1").data("disabled", false);
});
​

Working demo here: http://jsfiddle.net/jfriend00/NSZ8P/