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

Markdown is supported in the comment area, so you can write inline code in backticks like `this` or multiline blocks of code in in triple backtick fences like ```this```. You don't need to escape code in backticks, Markdown does that for you.

Sadly, it's kind of broken. WordPress only accepts a subset of HTML in comments, which makes sense, because certainly some HTML can't be allowed, like <script> tags. But this stripping happens before the comment is processed by Markdown (via Jetpack). It seems to me that would be reversed, because after Markdown processes code in backticks, it's escaped, thus safe. If you think you can fix this issue, get in touch!

If you need to make sure the code (typically HTML) you post absolutely posts correctly, escape it and put it within <pre><code> tags.

Current ye@r *

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