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

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

Answer 2

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 */
}

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