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

Question

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'})
}
});

Answer 1

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");

Answer 2

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'})
});