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:
jsfiddle
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);
});
});
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: http://jsfiddle.net/eQUne/6/
function bindClick() {
$('#click').one('click', function() {
$('#status').append("bound ");
setTimeout(bindClick, 2000);
});
}
$(document).ready(function(){
bindClick();
});
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.
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: http://jsfiddle.net/eQUne/
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)