Site icon StartFunction

How to avoid double clicking with jQuery

There has been always one troubling issue regarding web forms and user interaction: when the user double clicks the submit button. Detecting and preventing it or disabling the button is an expensive operation in terms of computing. Fortunately, jQuery has a neat solution. As usual.

Enter one function. This function will simply unbind the click event from an object after it has been clicked. It is really that simple. All you need to pass to one() is the event that you want to bind/unbind and a handler function to execute when the event is triggered:

[js]
jQuery(‘#submit-form’).one(‘click’, function() {
alert(‘Hold your horses, girl!’);
});
[/js]

or you can simply hide the button, like the following example

Click me once!

The code for the example above is
[js]
jQuery(document).ready(function(){
jQuery(‘#oncebutton’).one(‘click’, function() {
jQuery(this).slideUp();
});
});
[/js]

Read more about one() in the documentation for jQuery.

Exit mobile version