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

android.nick picture android.nick · Sep 20, 2010 · Viewed 8.9k times · Source

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

mikewilliamson picture mikewilliamson · Sep 20, 2010

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