Disabling links to stop double-clicks in JQuery

Question

How would I disable all links with the button class after they are clicked once? I\'d like to be able to do this in one place, and not have to change all of the

Answer 1

I believe you are talking about a common problem, you just don't want a link/button be clicked more than once at one go. Perhaps you don't really want to disable the button or link, you simply want to prevent 'another click' before the first click finishes.

If you want a delay in between clicks, here is one of the options:

//prevent double click
$(document).on('click', ".one-click", function(e){

    if($(this).data('lastClick') + 1000 > new Date().getTime()){

        e.stopPropagation();
        return false;
    }
    $(this).data('lastClick', new Date().getTime());
    return true;

});

What needs to do next is to give buttons or links a class of 'one-click'.

The event is registered to the document, it will work for dynamically loaded html, too.

The 1000 in the code is the delay of one second. i.e. within the 1 second of the first click, any click is ignored. Change the delay value as desired.

I came across this problem when I want to stop a Bootstrap Modal (modified and Ajax enabled) popping up more than once. The above solution does not help though, one need to use Bootstrap modal's 'show' and 'hide' event to prevent double popping.