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. User Avatar
    Permalink to comment#

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


    • User Avatar
      Chris Coyier
      Permalink to comment#

      Indeed it is, thanks for posting.

    • User Avatar
      Permalink to comment#

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

    • User Avatar
      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. User Avatar

    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?

    • User Avatar
      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. User Avatar
    Artur Ejsmont
    Permalink to comment#

    Sweet! thanks guys.

    did not know the one() trick : -)


  4. User Avatar
    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. User Avatar
    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. User Avatar
    Permalink to comment#

    is possible to remove unbind on blur ?

  7. User Avatar
    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. User Avatar
    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!

You may write comments in Markdown. This makes code easy to post, as you can write inline code like `<div>this</div>` or multiline blocks of code in triple backtick fences (```) with double new lines before and after.

Code of Conduct

Absolutely anyone is welcome to submit a comment here. But not all comments will be posted. Think of it like writing a letter to the editor. All submitted comments will be read, but not all published. Published comments will be on-topic, helpful, and further the discussion or debate.

Want to tell us something privately?

Feel free to use our contact form. That's a great place to let us know about typos or anything off-topic.