How to prevent a double-click using jQuery?

double-click, jquery

Solution

jQuery's one() will fire the attached event handler once for each element bound, and then remove the event handler.

If for some reason that doesn't fulfill the requirements, one could also disable the button entirely after it has been clicked.

$(document).ready(function () {
     $("#submit").one('click', function (event) {  
           event.preventDefault();
           //do something
           $(this).prop('disabled', true);
     });
});

It should be noted that using the ID `submit` can cause issues, as it overwrites the `form.submit` function with a reference to that element.

Problem

I have a button as such: ``` <input type="submit" id="submit" value="Save" /> ``` Within jQuery I am using the following, but it still allows for double-clicks: ``` <script type="text/javascript"> $(document).ready(function () { $("#submit").one('click', function (event) { ``` Any idea on how I can prevent double-click?

Original source