Grow your CSS skills. Land your dream job.

Last updated on:

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() {
       $(this).unbind('click');
       alert('Clicked and unbound!');
});

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

Comments

  1. Permalink to comment#

    Doesn’t this have the same effect as:
    $(‘#my-selector’).one(‘click’, function() {
    alert(‘This can only happen 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?

    • 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. Sweet! thanks guys.

    did not know the one() trick : -)

    art

  4. Permalink to comment#

    Hey,

    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()
    {
    $('foo').click(function(){
    $(this).unbind('click');
    f();
    });

    // something else
    }

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

  5. 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() {
    $(this).unbind('click.myEvent');
    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 (){
        //...do something
        $('#selector').unbind('event',myEventFunc);
    };
     $('#selector').bind('event',myEventFunc);
    

Leave a Comment

Posting Code

  • Use Markdown, and it will escape the code for you, like `<div class="cool">`.
  • Use triple-backticks for blocks of code.
    ``` 
    <div>
      <h1>multi-line block of code</h1>
      <span>be cool yo.</span>
    </div>
    ```
  • Otherwise, escape your code, like <code>&lt;div class="cool"&gt;</code>. Markdown is just easier though.

Current ye@r *

*May or may not contain any actual "CSS" or "Tricks".