Click Only Once with jQuery

Have a look at this previous article which shows the trick with which you can bind the event to any HTML element but only once. Here is the same trick with the jQuery.

In MooTools you have [code]click:once[/code] to assign once event but with jQuery we have [code].one()[/code] method with which we can assign event but only once. :)

Have a look at below code block for the same. Here I will show you two ways to achieve the same functionality.

Method 1

In this method we will use inbuilt method provided by the jQuery team.

[cc lang=”javascript”]
$(“#click_me_once”).one(“click”, function() {
alert(“This will be clicked only once.”);
});
[/cc]

Method 2

In this method we will use the traditional click event and unbind it after one use.

[cc lang=”javascript”]
$(“#click_me_once”).bind(“click”, function( event ) {
alert(“This will be clicked only once.”);
$(this).unbind(event);
});
[/cc]

Hope this will be useful for the jQuery lovers. For the MooTools version have a look at here.