Click Once and Unbind

Have something happen on a click event, but only once! Unbind the click handler after the element has been clicked once.

$('#my-selector').bind('click', function() {
       alert('Clicked and unbound!');

Also see Ben's comment below for jQuery's .one() function which is essentially the same thing.


  1. Ben
    Permalink to comment#

    Doesn’t this have the same effect as:
    $(‘#my-selector’).one(‘click’, function() {
    alert(‘This can only happen once’);


    • Chris Coyier
      Permalink to comment#

      Indeed it is, thanks for posting.

    • Eric
      Permalink to comment#

      The bind formula does allow you to re-bind the click event later if needed.

    • Anubhav
      Permalink to comment#

      No, both are different.

      when you use a ‘one’, the handler is executed at most once per element per event type.
      That mean if selector affects multiple elements. This will allow only one click per element.

      But when you explicitly unbind a event, event will be unbinded from all element after being triggered once.

  2. Justin

    I need to re-bind a click event after some animate effects have been applied. What I want to happen is allow the user to click the button only once until the animate sequence has completed. In other words click (only allow once until event finishes), unbind, animate, re-bind click. I have had some trouble with this, any suggestions?

    • Chris Coyier

      Instead of binding and unbinding the event, maybe instead just check if the element is animated before doing what you were going to do.

      You can test if something is currently being animated with :animated as part of the selector.

  3. Artur Ejsmont
    Permalink to comment#

    Sweet! thanks guys.

    did not know the one() trick : -)


  4. deely
    Permalink to comment#


    one() is a nice feature, but not always is a working solution. When we have a function, and inside we bind click event, to call that function recursively, we need to unbind the callback before we can call the function – if not, we get infinite loop.

    function f()

    // something else

    We cannot do that with one() function. But thanks for the tips!

  5. Mattew
    Permalink to comment#

    Good trick, but be carreful with the unbind(‘click’) wich will unbind all click events. Use namespace for this is safer. To be sure that only the good click event is unbinded :

    $('#my-selector').bind('click.myEvent', function() {
    alert('Clicked and unbound my event!');

  6. mcmwhfy
    Permalink to comment#

    is possible to remove unbind on blur ?

  7. SigInTheHead
    Permalink to comment#

    As others have said .one() is the best solution, but if you need to bind / unbind, you should be very careful when using $(‘#selector’).unbind(‘event’), as all listeners for the ‘event’ will be unbound.

    This will ensure that you are only unbinding the one listener.

    var myEventFunc = function (){
        // something
  8. nauman
    Permalink to comment#

    plz help when i click once on submit button my submitHandler() call
    when i click again on submit button i will call 2 times …
    this is my code


    Email address*

    Phone Number*






    function submitHandler(){

               $("#general").bind('submit' , function(event) {
                $('.form_status').css('display', 'none');
                 var form = $('#general');          
                 var formData =   new FormData(this);
                 var form_status = $('<div class="form_status"></div>');                    
                 type: "POST",
                 url: "sendGeneralEmail.php",
                 data: formData,
                 contentType: false,
                 cache: false,
                 beforeSend: function(){
                 form.prepend( form_status.html('<p><i class="fa fa-spinner fa-spin"></i> Email is sending...</p>').fadeIn() );
              .done(function(response) {
                     form_status.html('<p class="text-success">' + response + '</p>').delay(4000);
             return false;

Leave a Comment

Posting Code

We highly encourage you to post problematic HTML/CSS/JavaScript over on CodePen and include the link in your post. It's much easier to see, understand, and help with when you do that.

Markdown is supported, so you can write inline code like `<div>this</div>` or multiline blocks of code in in triple backtick fences like this:

  function example() {
    element.innerHTML = "<div>code</div>";

We have a pretty good* newsletter.