I've already looked at similar questions but the answers provided involve buttons and not div elements. When I click the div element with id click, the click event handler is disabled by unbind() and sets a timer for 2 seconds. After 2 seconds, the click event handler should be enabled again by bind(). The problem is that the click event handler doesn't seem to get "rebound". I am appending text to another div element to check if the click event handler is active.

Here is my JSFiddle.

I've already looked at similar questions but the answers provided involve buttons and not div elements. When I click the div element with id click, the click event handler is disabled by unbind() and sets a timer for 2 seconds. After 2 seconds, the click event handler should be enabled again by bind(). The problem is that the click event handler doesn't seem to get "rebound". I am appending text to another div element to check if the click event handler is active.

Here is my JSFiddle.

• javascript
• jquery
• bind
• settimeout
• unbind

5 Answers 5

Another approach to the whole problem is not to bother with unbinding and rebinding and just use a "disabled" flag:

$(document).ready(function(){

   var clickDisabled = false;
   $('#click').click(function(){
      if (clickDisabled)
         return;

      // do your real click processing here

      clickDisabled = true;
      setTimeout(function(){clickDisabled = false;}, 2000);
  });

});

Try this:

$(document).ready(function(){

$('#click').click(function(){

    $('#click').unbind('click');
    $('#status').append("unbound ");

    setTimeout(
        function(){
            $('#click').bind('click',function(){

            });
            $('#status').append("bound ");           
        },
        2000
        );
    });
});

You misspelled setTimeout and your "bound" message was being appended only on click.

I answer your question but just don't kill yourself :)) Just kidding... Your code is fine just a typo: setTimeOut should be setTimeout (the O should be o)

When you are rebinding the function the second time you are binding just a subset of all your code - all it does it output bound to the status, but it doesn't contain any of the code for doing a timeout a second time.

Also, you will like the .one() function.

I've fixed up your code here: https://jsfiddle.net/eQUne/6/

function bindClick() {
    $('#click').one('click', function() {
        $('#status').append("bound ");
        setTimeout(bindClick, 2000);
    });
}

$(document).ready(function(){
    bindClick();
});

If I got what you were asking correctly, this should work:

<div id="click" >time out</div>
<div id="status"></div>

$(document).ready(function() {
    $('#click').click(unbindme);

    $('#status').html('bound'); 

    function unbindme()
    {
        $('#click').unbind('click');
        $('#status').html('unbound');
    
        setTimeout(function(){
            alert('here');
            $('#status').html('bound'); 
            $('#click').click(unbindme);   
        }, 2000);
    }
}

Check it out here: https://jsfiddle.net/eQUne/