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:

$('#submit-form').one('click', function() {

    alert('Hang on!');

});

The code for a simple example doing this is:

$(document).ready(function(){

  $('#my_DIV_ID').one('click', function() {

    $(this).slideUp();

  });

});

More about one() in the documentation for jQuery.