Menu
Using jQuery, I would like to, without changing the disabled attribute of a given button, disable all click events for it.
I was thinking of retrieving the click event handlers, unbind them, and storing them (say, using data()).
Then I can re-bind them once the button is enabled again.
425
Not hard to do since jQuery already stores all of its event handlers as data() on the element itself. You can get (and modify) this object through .data().events.
Now you can easily save a reference to the handlers with:
events._click = events.click;
events.click = null;
And then restore them by using:
events.click = events._click;
events._click = null;
Note that this won't disable events that are bound via .delegate() or .live(), as they work by event bubbling/propagation. To disable those as well, simply bind a new handler that blocks propagation to ancestor elements:
events._click = events.click;
events.click = null;
// Block .live() and .delegate()
$("#el").click(function (e) {
e.stopPropagation();
});
You don't even need to unbind this blocker function when it's time to enable the handlers again, since events.click = events._click will override the function you just bound with all the old handlers.
103
Here is yet another way:
$("#myButton").click(function() {
if ($(this).attr("temp_disable") == "disabled") {
//nothing to do, temporarily disabled...
}
else {
alert("You clicked me!");
}
});
To "disable" it for 10 seconds:
$("#myButton").attr("temp_disable", "disabled");
window.setTimeout(function() { $("#myButton").attr("temp_disable", ""); }, 10000);
Live test case: http://jsfiddle.net/yahavbr/ByM6h/
26
That is the way to go. If you have onclick specified as an attribute you may switch the attribute busing
$(button_element).attr('click', '');
and
$(button_element).attr('click', 'do_the_regular_action()');
All answers here are now outdated - as of jQuery 1.7 you should use .off() as explained on the official jQuery site
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>off demo</title>
<style>
button {
margin: 5px;
}
button#theone {
color: red;
background: yellow;
}
</style>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
<button id="theone">Does nothing...</button>
<button id="bind">Add Click</button>
<button id="unbind">Remove Click</button>
<div style="display:none;">Click!</div>
<script>
function flash() {
$( "div" ).show().fadeOut( "slow" );
}
$( "#bind" ).click(function() {
$( "body" )
.on( "click", "#theone", flash )
.find( "#theone" )
.text( "Can Click!" );
});
$( "#unbind" ).click(function() {
$( "body" )
.off( "click", "#theone", flash )
.find( "#theone" )
.text( "Does nothing..." );
});
</script>
</body>
</html>If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
