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.

Answer 2

$('a.disableAfterOneClick').on('click', function(e){
    e.preventDefault(); //disabling default behaviour
    if (this.href) //checking if href attr is stil set
    {
        href = this.href; //saving current href for it will be removed
        $(this).removeAttr("href"); //removing href
        window.location.href = href; //redirecting user to href
    }
});

Answer 3

$('a.button').bind('click', function(){
    alert('clicked once'); // for debugging
    // remove all event handlers with unbind()
    // add a new function that prevents click from working
    $(this).unbind().bind('click', function(){
        alert('clicked a 2nd time or more'); // for debugging
        return false;
    });
});

Answer 4

You may have to disable ajax submissions on the form and handle button click:

 $("form").attr("data-ajax", "false");
    $("[type='submit']").click(function (e) {
        var form = $("form");
        if (!this.disabled) {
            if (form.valid()) {
                this.disabled = true;
                form.submit();
            }
        }
    });

Answer 5

I'm using this to disable the "click" event send twice ( not the "double click" events ). Work for IE>=9, firefox, webkit, or chrome. The first click event disable the button/link/span, during a time. After time passed, button/link/span is enable and the user can click on it.

$(document).ready(function() {
/** 
 * disable double click 
 **/
document.addEventListener('click', function(event) { 

    var targetElement = event.target || event.srcElement;
    var target = $(targetElement);

    var eLink = target.prop("tagName") === 'A'; // hypertext link
    var eButton = target.prop("tagName") === 'BUTTON'; // button 
    var fButton = target.prop("tagName") === 'SPAN' && target.parent().parent().hasClass("fbutton"); // flexigrid buttons

    if ( eLink || eButton || fButton ) {

        if ( target.data("clicked") ) {
            event.stopPropagation();
            event.preventDefault();
            if ( window.console ) {
                console.log("double click event disabled");
            }
            return false;
        } else {

            target.data("clicked", true);
            target.prop('disabled', true);
            target.addClass("clicked");

            setTimeout(function() {
                target.data("clicked", false);  
                target.prop('disabled', false);
                target.removeClass("clicked");

            }, 500); // Do something after 500 millisecondes
            return true;
        }
    }

    }, true);


});

Answer 6

You could also just throw a class on the anchor tag and check on click:

$('a.button').click(function(){ 
  if($(this).hasClass('clicked')) return false;
  else { 
    $(this).addClass('clicked'); 
    return true;
  }
});

With the class, you can do some extra styling to the link after the first click.