jQuery prevent other events after a click while function in progress

Question

I have two links a with classes .next-button-1 and .prev-button-1 and when I click on the buttons is calls different functions

    $('.next-button-1').click(function (e) {
    e.preventDefault();
    e.stopPropagation();
    gotoNext();
});

$('.prev-button-1').click(function (e) {
    e.preventDefault();
    e.stopPropagation();
    gotoPrev();
});

The performing of each function takes some time. Is there any way to make the button could not click until the function is executed?

upd
I have found the solution:

$('.next-button-1').click(function (e) {
    e.preventDefault();
    e.stopPropagation();
    if ($(this).hasClass('disabled'))
        return false; 
     else {
        $(this).addClass('disabled');
        gotoNext();
    }
});

$('.prev-button-1').click(function (e) {
    e.preventDefault();
    e.stopPropagation();
    if ($(this).hasClass('disabled'))
        return false; 
     else {
        $(this).addClass('disabled');
        gotoPrev();
    }
});

and I remove class 'disabled'
$('.next-button-1').removeClass('disabled'); in gotoNext() function
and
$('.prev-button-1').removeClass('disabled'); in gotoPrev() function

are they button elements or span or any other element

Arun P Johny
– Arun P Johny

2014-03-30 16:13:03 +00:00
Commented Mar 30, 2014 at 16:13 — Arun P Johny
– Arun P Johny, Commented Mar 30, 2014 at 16:13

Biduleohm · Accepted Answer · 2014-03-30 16:52:16Z

2

Try this:

$('.next-button-1').click(function (e) {
    e.preventDefault();
    e.stopPropagation();
    $(this).prop('disabled', true);
    gotoNext();
});

$('.prev-button-1').click(function (e) {
    e.preventDefault();
    e.stopPropagation();
    $(this).prop('disabled', true);
    gotoPrev();
});

Then re-enable it with $(your selector for the button).prop('disabled', false); at the end of the function which take some time to execute.

Edit:

As your buttons are a tags this solution won't work. Instead you can unbind and rebind your events handlers like this:

function nextHandler(e) {
    e.preventDefault();
    e.stopPropagation();
    $(this).unbind("click", nextHandler);
    gotoNext();
}

function prevHandler(e) {
    e.preventDefault();
    e.stopPropagation();
    $(this).unbind("click", prevHandler);
    gotoPrev();
}

$('.next-button-1').click(nextHandler);
$('.prev-button-1').click(prevHandler);

Then re-enable them with $('.next-button-1').click(nextHandler); at the end of your slow function. For clarity and uniformity you might want to use $.bind("click", handler) instead of $.click(handler).

More information about .bind()/.unbind() here.

Better solution:

function nextHandler(e) {
    e.preventDefault();
    e.stopPropagation();
    gotoNext();
}

function prevHandler(e) {
    e.preventDefault();
    e.stopPropagation();
    gotoPrev();
}

$('.next-button-1').one('click', nextHandler);
$('.prev-button-1').one('click', prevHandler);

Then at the end of your slow function add this: $('.next-button-1').one('click', nextHandler); (same form prev of course).

More information about .one() here.

edited Mar 30, 2014 at 16:52

answered Mar 30, 2014 at 16:15

Biduleohm

7502 gold badges11 silver badges20 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

truslivii.lev Over a year ago

I use links a, not buttons. Can I use ur code in this case?

Biduleohm Over a year ago

Nop, sorry. I'll check if they are some workaround for the a tag.

truslivii.lev Over a year ago

Not a problem) I have found the solution and added it in my question.

Biduleohm Over a year ago

Good. The only other solution I see is to unbind your events listeners then re-bind them after. It may be shorter than the class solution.

truslivii.lev Over a year ago

Can u explain me about it?

Collectives™ on Stack Overflow

jQuery prevent other events after a click while function in progress

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related