bind multiple events, then unbind a couple of them? is this right?

basically when you hover over the element, the background color changes, then changes back when you hover out of the element, but when you click the element i want to disable the hover effect and change the background color to a different color so the user knows that they clicked on it. what's the best way to do this? thanks!

$('.tellmereplies').bind({click: function() {
    $(this).animate({'backgroundColor':'#0099ff', 'color':'#fff'})
    $('.tellmereplies').unbind('mouseover','mouseout')
},mouseover: function() {
    $(this).animate({'backgroundColor':'#fbca54', 'color':'#fff'})
},mouseout: function() {
    $(this).animate({'backgroundColor':'#E4E4E4', 'color':'#c0c0c3'})
}
});

bind multiple events, then unbind a couple of them? is this right?

basically when you hover over the element, the background color changes, then changes back when you hover out of the element, but when you click the element i want to disable the hover effect and change the background color to a different color so the user knows that they clicked on it. what's the best way to do this? thanks!

$('.tellmereplies').bind({click: function() {
    $(this).animate({'backgroundColor':'#0099ff', 'color':'#fff'})
    $('.tellmereplies').unbind('mouseover','mouseout')
},mouseover: function() {
    $(this).animate({'backgroundColor':'#fbca54', 'color':'#fff'})
},mouseout: function() {
    $(this).animate({'backgroundColor':'#E4E4E4', 'color':'#c0c0c3'})
}
});

• javascript
• jquery
• bind
• unbind

• Don't forget that .hover() will simplify both binding and unbinding, since it binds both mouseenter and mouseleave in one method. – Peter Ajtai Commented Sep 20, 2010 at 1:49
• If you want to toggle the mouseover and mouseout, it would be nice to just toggle it by adding/removing class and not unbind events. – Reigel Gallarde Commented Sep 20, 2010 at 1:52

3 Answers 3

Take a look at jquery's event namespacing. I think that is probably going to be useful to you.

$("#div1").bind("event_name.namespace1");
$("#div1").bind("some_other_event.namespace1");
$("#div1").bind("event_name.namespace2");
$("div1").unbind(".namespace1");

I think you're looking for this:

$('.tellmereplies').bind("click", function() {
    $(this).animate({'backgroundColor':'#0099ff', 'color':'#fff'})
    $(this).unbind('mouseover mouseout')
}).bind("mouseover", function() {
    $(this).animate({'backgroundColor':'#fbca54', 'color':'#fff'})
}).bind("mouseout", function() {
    $(this).animate({'backgroundColor':'#E4E4E4', 'color':'#c0c0c3'})
});

I'd do this mainly in CSS. You can create the hover effects for your links using the :hover pseudo-class

.tellmereplies:hover {
    color: #fff;
    background-color: #0099ff;
}

Then when the user clicks on the link, add another class value to the link and override the hover effects for the link.

$('.tellmereplies').addClass('tellmereplies-clicked');

.tellmereplies-clicked {
    /* new colors */
}

.tellmereplies-clicked:hover {
    /* new colors */
}