jQuery Allow a single click but disallow a double click

Question

I originally wanted a submit to take place on a single click event:

    $("#booking_Form #submit_Booking").bind("click", function(event){.....

I then found (obviously) that a double click led to a duplicate submission.

So I tried capturing and suppressing this with:

    $("#booking_Form #submit_Booking").bind("dblclick", function(event){
          return false;
    });

But the single click event still fired twice.

Am I correct it thinking that if it is imperative that a double click does not submit twice that I must change the single click event to a double click event.

Or is there some global way to switch off double clicks.

Answer 1

You should use .one(). That way all subsequent clicks will do nothing

$("#booking_Form #submit_Booking").one("click", function(event) {
    //do something
});

Link: http://api.jquery.com/one/

EDIT: If you want to use .one(), how about doing something like this...

JAVASCRIPT:

$(document).ready(function(){
     $("#b1").one("click", function(e){
        ajaxFunction();
     });   

    function ajaxFunction(){
         $("#b1").one("click", function(e){
             ajaxFunction()
         });

        $.ajax({
            type: "POST",
            url: "http://fiddle.jshell.net/", //use actual URL
            success: function(data){
               //do something    
            }
        });           
    }
});​

DEMO: http://jsfiddle.net/BKqm9/13/

Answer 2

Just disable your input in the click handler, so the user cannot click a second time, you will enable it again when you finish the logic in your click handler. So you can do as follows:

$("#booking_Form #submit_Booking").bind("click", function(event){
   $(this).attr('disabled','true');
   ...
   ...
   var btn = $(this);
   $.ajax('someurl.php',{success: function(){
          ...
          ...
          btn.removeAttr('disabled');
    }
   })
}

Answer 3

You can wrap it in a closure and use a dirty flag variable. (closure so the flag isn't global)

(function(){
    var dirtyFlag = false;
    $('#clicker').click(function(){
        if (dirtyFlag) return;
        dirtyFlag = true;
        setTimeout(function(){
            console.log('clean and proceeding');
            dirtyFlag = false;
        }, 500);
    });
})();​

Fiddle here. Since disabling the button isn't an option this is IMO the cleanest and simplest solution.

Answer 4

If you want the queuing method, try something like this : (just a mockup)

$('<div>').clearQueue('buttonQueue');

$("#booking_Form #submit_Booking").bind("click", function(event) {
    $('<div>').clearQueue('buttonQueue');
    $('<div>').queue('buttonQueue', myFunctionHere());
});

putting this in the DocumentReady function should be fine.