Question

101

jQuery Allow a single click but disallow a double click

rated 0 times [ 108] [ 7] / answers: 1 / hits: 18518 / 12 Years ago, mon, december 3, 2012, 12:00:00

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.

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

jackie

Add To Favorites

Follow

Total Points: 442

Total Questions: 107

Total Answers: 94

Location: Honduras

Member since Sun, Dec 26, 2021

2 Years ago

jackie questions

1 Is it possible to get the selector from a locator object in playwright?

Thu, Apr 28, 22, 00:00, 2 Years ago

1 Upload and preview Video in React

Sat, Sep 18, 21, 00:00, 3 Years ago

1 React countdown timer using new Date()

Wed, Jul 14, 21, 00:00, 3 Years ago

1 How to style the button in bootstrap vue dropdown like a circle

Thu, Oct 22, 20, 00:00, 4 Years ago

1 Vue reactivity, prevent re-rendering component on prop update with input v-model

Wed, Sep 2, 20, 00:00, 4 Years ago

View All

answered 12 Years ago dezmondhumbertob · Accepted Answer

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/