Click Only Once with jQuery

  • Avinash
  • 1
  • Mar 04, 2012
  • Web Development

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 click:once to assign once event but with jQuery we have .one() 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.

$("#click_me_once").one("click", function() { alert("This will be clicked only once."); });
  $("#click_me_once").one("click", function() {
   alert("This will be clicked only once.");
  });

Method 2

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

$("#click_me_once").bind("click", function( event ) { alert("This will be clicked only once."); $(this).unbind(event); });
  $("#click_me_once").bind("click", function( event ) {
    alert("This will be clicked only once.");
    $(this).unbind(event);
  });

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

Related Posts

Written by Avinash

Avinash Zala is leading various projects which deals with the various technology involved with the web. A combination of perfect technical and management skills. Avinash would like to chat with you and convert your imagination into the working system. You can get in touch with him on Facebook and Twitter.

View all posts by: