How to prevent a double-click using jQuery?

Question

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?

Answer 1

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.