Temporarily disable click event

Question

I want to disable click event on two buttons for a while when another event is going and then reenable it. .off method can block it, but using after .on can't make click event on buttons available again.

$('#button-block-1').click(function () {
    $('#block-1, #block-1-expansion-button').stop().fadeToggle('slow');
    if ($('#block-1, #block-1-expansion-button').is(':visible')) {$('#block-2').fadeOut('slow')}
});
$('#button-block-2').click(function () {
    $('#block-2').stop().fadeToggle('slow');
    if ($('#block-2').is(':visible')) {$('#block-1, #block-1-expansion-button').fadeOut('slow')}
});

$('#block-1-expansion-button').toggle(function () {
    $('#body-wrapper').animate({
        'top': '20px'
    }, 450);
    $('#button-block-1, #button-block-2').off('click');
    },
    function () {
    $('#body-wrapper').animate({
        'top': '0'
    }, 450);
    $('#button-block-1, #button-block-2').on('click');
});

JsFiddle example

[How to temporarily disable a click handler in jQuery?](http://stackoverflow.com/questions/1263042/how-to-temporarily-disable-a-click-handler-in-jquery). — Vucko, Jan 22 '13 at 08:39

score 5 · Accepted Answer · answered Jan 22 '13 at 08:39

5

You should use prop() instead:

$('#button-block-1, #button-block-2').prop('disabled',true);//disabled buttons
$('#button-block-1, #button-block-2').prop('disabled',false);//enabled buttons

answered Jan 22 '13 at 08:39

A. Wolff

74,033
9
94
155

This doesn't do the trick for me in safari 7.1 - any ideas on why the button is still clickable? – Jonathan Sep 21 '14 at 12:28

Temporarily disable click event

1 Answers1