Develop Reference

Turn on() event back after apply off

How can I turn an on('click') event back on after I apply event off()?
$('#btn-aluno').on('click', function() {
$('.new-step-email-aluno').toggle();
$('#btn-familiar').off();
});
$('#btn-familiar').on('click', function() {
$('.new-step-email-familiar').toggle();
$('#btn-aluno').off();
});
new-step-email-familiar and new-step-email-aluno = <input>
btn-aluno and btn-familiar = <span> (used as a button)

Instead of turning off the event listener, you could do the same thing by using event delegation,
$(document).on('click',"#btn-aluno.active", function() {
$('.new-step-email-aluno').toggle();
$('#btn-familiar').removeClass("active");
});
$(document).on('click',"#btn-familiar.active", function() {
$('.new-step-email-familiar').toggle();
$('#btn-aluno').removeClass("active");
});
And whenever you want to activate the event listeners, just add the class active to the relevant elements. Also in the place of document try to use any closest static parent of the element on which the event gonna be bound.
As per your requirement, you have edit your logic like below,
$(document).on('click',"#btn-aluno.active", function() {
$('.new-step-email-aluno').toggle();
$('#btn-familiar').toggleClass("active");
});
$(document).on('click',"#btn-familiar.active", function() {
$('.new-step-email-familiar').toggle();
$('#btn-aluno').toggleClass("active");
});
DEMO

jQuery.hover not working

I have a surprisingly simple piece of jQuery code that doesn't work as expected.
I want to change the class of a div when I hover over it and restore the class back when the mouse is out of the area of the div. Here's my code.
function WireHandlers()
{
SetBannerHoverImage();
}
function SetBannerHoverImage()
{
$("#banner").hover( OnBannerHover. OnBannerOut );
}
function OnBannerHover()
{
$("#banner").removeClass("grayGradiant");
$("#banner").addClass("redGradiant");
}
function OnBannerOut()
{
$("#banner").removeClass("redGradiant");
$("#banner").addClass("grayGradiant");
}
$(document).ready( function() { WireHandlers(); } );
The document.ready does call WireHandlers, which does call SetBannerHoverImage, which does successfully call the $(selector).hover() method.
However, when I hover over the div, the OnBannerHover and OnBannerOut listeners are not called.
PS: It might be important to note that inside the div covering 100% of its area is a table.

Like in the example from api.jquery.com you need to seperate your handler with a comma:
$( selector ).hover( handlerIn, handlerOut )
So try:
$("#banner").hover( OnBannerHover, OnBannerOut );

Maybe try something like:
$("#banner").hover(
function(){
$(this).removeClass('red').addClass('grey');
},
function(){
$(this).removeClass('grey').addClass('red');
}
);

If this is not a typo
$("#banner").hover( OnBannerHover. OnBannerOut );
then it should be
$("#banner").hover( OnBannerHover, OnBannerOut );
Alternatively, you can use (hover is just a shorthand of these)
$("#banner").on('mouseenter', function(){
$(this).removeClass("grayGradiant").addClass("redGradiant");
})
.on('mouseleave', function(){
$(this).removeClass("redGradiant").addClass("grayGradiant");
});

Prevent element from animating based on previous class

$('.example').hover(
function () {
$(this).css('background','red');
},
function () {
$(this).css('background','yellow');
}
);
$('.test').click(function(){
$(this).css('marginTop','+=20px').removeClass('example');
}
);
<div class="text example"></div>
Although the class example was seemingly removed, the hover actions for it are still being applied to the element that once had that class. How can I prevent this?
http://jsfiddle.net/gSfc3/
Here it is in jsFiddle. As you can see, after executing the click function to remove the class, the background still changes on hover.

Event handlers are bound to a Node, so it doesn't matter if that Node doesn't own a specific className anymore. You would need to .unbind() those events manually, or better, use jQuerys .off() method.
So, if you can be sure that there aren't any other event handlers bound to that node, just call
$(this).css('marginTop','+=20px').removeClass('example').off();
This will remove any event handler from that Node. If you need to be specific, you can use jQuerys Event namespacing, like so
$('.example').on( 'mouseenter.myNamespace'
function () {
$(this).css('background','red');
}
).on('mouseleave.myNamespace'
function() {
$(this).css('background','yellow');
}
);
and use this call to only unbind any event that is within the namespace .myNamespace
$(this).css('marginTop','+=20px').removeClass('example').off('.myNamespace');

$('.example').unbind('mouseenter').unbind('mouseleave')
In your code, $('.example').hover attaches a mouseenter and mouseleave directly to each element.
-or-
A better solution might be to use delegation with on
$(document.body).on('mouseenter', '.example', function() { ... });
$(document.body).on('mouseleave', '.example', function() { ... });
Using that code, removing the example class will work as expected, because the handlers are based on css selector, while .hover attaches directly to the elements.

$('.example').live({
mouseenter:function () {
$(this).css('background','red');
},
mouseleave:function () {
$(this).css('background','yellow');
}
});
demo: http://jsfiddle.net/gSfc3/1/

Try this:
$('.test').hover(
function () {
$('.example').css('background','red');
},
function () {
$('.example').css('background','yellow');
}
);

jQuery unbind click event function and re-attach depending on situation

The code below I use to create a sliding menu. I need to know how to unbind the function attached to the click event and re-attach it some other time. (using jQuery 1.7.2)
$(document).ready(function(){
$('.section').hide();
$('.header').click(function(){
if($(this).next('.section').is(':visible'))
{
$('.section:visible').slideUp()
$('.arrows:visible').attr("src","right.gif")
}
else
{
$('.section').slideUp();
$(this).next('.section').slideToggle();
$(this).find('.arrows').attr("src","down.gif")
});
});
The code below is what I have so far
$('#printVers').click(function(){
if($('#formVersion').val() != "Print")
{
$('.header').unbind('click');
}
else
{
//else re-attach functionality?
}
});
Thanks

Simply make a named function. You can go low tech here and back to basics to unbind and reattach specific events.
function doStuff()
{
if($(this).,next('.section').is(':visible'))
...
}
$('.header').on('click', doStuff);
$('.header').off('click', doStuff);

Instead of unbind and re-bind, I suggest you to add a simple class to .header and check for the class in the click handler. See below,
$('#printVers').click(function(){
if($('#formVersion').val() != "Print")
{
$('.header').addClass('dontClick');
} else {
$('.header').removeClass('dontClick');
}
});
And in your .header click handler,
$('.header').click(function(){
if ($(this).hasClass('dontClick')) {
return false;
}
//rest of your code
If you insist on having a unbind and bind, then you can move the handler to a function and unbind/bind the function any number of time..

You can try something like this.
$('#printVers').click(function(){
if($('#formVersion').val() != "Print")
{
$('.header').addClass('clickDisabled');
}
else
{
$('.header').removeClass('clickDisabled');
}
});
And then in the click handler check for this class.
$(document).ready(function(){
$('.section').hide();
$('.header').click(function(){
if(!$(this).hasClass('clickDisabled')){
...
...
}
});
});

Why not make that top section a function, and then call it in your else statement?

You could try setting a variable as a flag. var canClick = ($('#formVersion').val() != 'Print'); Then in the click handler for your .header elements check to see if canClick is true before executing your code.
If you still want to remove the handler you can assign the events object to a variable. var eventObj = #('.header').data('events'); That will give you an object with all the handlers assigned to that object. To reassign the click event it would be like $('.header').bind('click', eventObj.click[0]);

After trying so hard with bind, unbind, on, off, click, attr, removeAttr, prop I made it work.
So, I have the following scenario: In my html i have NOT attached any inline onclick handlers.
Then in my Javascript i used the following to add an inline onclick handler:
$(element).attr('onclick','myFunction()');
To remove this at a later point from Javascript I used the following:
$(element).prop('onclick',null);
This is the way it worked for me to bind and unbind click events dinamically in Javascript. Remember NOT to insert any inline onclick handler in your elements.

You could put all the code under the .click in a separated function
function headerClick(){
if($(this).next('.section').is(':visible'))
{
$('.section:visible').slideUp()
$('.arrows:visible').attr("src","right.gif")
}
else
{
$('.section').slideUp();
$(this).next('.section').slideToggle();
$(this).find('.arrows').attr("src","down.gif")
}
}
and then bind it like this:
$(document).ready(function(){
$('.section').hide();
$('.header').click(headerClick);
});
$('#printVers').click(function(){
if($('#formVersion').val() != "Print")
{
$('.header').unbind('click');
}
else
{
$('.header').click(headerClick);
}
});

How can I temporarily disable click events on a button without actually disabling it?

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.

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.

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/

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>

You can use unbind and bind
$('#control').unbind('click');
and
$('#control').bind('click', NameOfFunctionToCall);

I'll expand on the answer(s) offered by Barry and Thariama... which I think will satisfy Ovesh's objections:
You can add a namespace to your event binding. That lets you refer to that specific event binding later, without colliding with other bindings. I think this is cleaner than the accepted answer... (To be fair, this may not have been available in jQuery at the time of the original question).
// A generic click handler:
$('.myButton').click(function() { ... });
// A namespaced click handler:
$('.myButton').bind('click.someSituation', function() { ... });
// Later you can unbind only the handler you want by using the namespace:
$('.myButton').unbind('click.someSituation');
// The default click handler still works.

Instead of doing this thing Use Core Javascript to do this task
e.g. Look following example.
function MakeSaveDisabled(flg) {
if (flg != null) {
$(".btnpost").each(function () {
this.removeAttribute("disabled");
if (this.hasAttribute("oclickevt")) {
this.setAttribute("onclick", this.getAttribute("oclickevt"));
}
});
}
else {
$(".btnpost").each(function () {
this.setAttribute("disabled", "true");
if (this.getAttribute("onclick") != null) {
this.setAttribute("oclickevt", this.getAttribute("onclick"));
}
this.removeAttribute("onclick");
});
}
}
Save the javascript function in some temporary attribute and bind it when you required.

You can save the events and then restore them, this seems to work (note that the _ may need to be omitted depending on the version of JQuery).
This example stops the bootstrap toggle on-change event firing, then triggers the toggle then resets the events to whatever were there previously. You can do the same with click etc.
var events;
// Save change events associated with this control
events = $._data($(this)[0], "events").change;
$._data($(this)[0], "events").change = null;
// Do your stuff here
$(this).bootstrapToggle("off");
// Reset change events
$._data($(this)[0], "events").change = events;