Question

I have an anonymous function handling the procedure following a click event on a set of radio buttons.

Within this function some animations take place, and I wish to disable the click event until the function ends to prevent it firing again from within the function.

The function calls the class name common to each radio buttons:

$(".question1").click( function(){  

How can disable any further click events on this class element while the function executes any animations, and reinstate it after they complete ?

I have tried removeClass() and addClass() to achieve this, but it does not seem to work within the function.

I have also tried .off() and .on() with no luck.

The radio buttons themselves are disabled within the function, but because the function is called on the class name, the click event still fires.

Many thanks.

Answer 1

Must be something wrong… on/off functions works very well, Also the class selectors.

Could you put some code? give as a fiddle so we can try to help.

If you cant give us the code, I will try:

// triggered only if the class is not disable
$(".question1:not(:disabled)").on('click', function(){
    // do something...
});

or

function theClick(){
    $(".question1").on('click', function(){
        // do something...
    });
}
function theAnimation(){
    $("#someId").on('click', function(){
        $(".question1").off('click'); // disable the click
        // do some animation
        // do more...
        // and more...
        theClick(); // finish, so re-enable
    });
}