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

Don't forget that [.hover()](http://api.jquery.com/hover/) will simplify both binding and unbinding, since it binds both mouseenter and mouseleave in one method. — Peter Ajtai, Sep 20 '10 at 01: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, Sep 20 '10 at 01:52

score 14 · Accepted Answer · answered Sep 20 '10 at 01:31

14

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

answered Sep 20 '10 at 01:31

mikewilliamson

24,303
17
59
90

1

after looking into it a bit more, thank you for this. It's exactly what will help me grow in jquery. – android.nick Sep 20 '10 at 10:10

score 2 · Answer 2 · answered Sep 20 '10 at 01:22

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

answered Sep 20 '10 at 01:22

Chris Laplante

29,338
17
103
134

awesome, i forgot to mention that after I click it and it unbinds mouseover and mouseout, that if the user clicks it again it will toggle those back on and bind them again, i tried a few things but couldn't get it, any idea? – android.nick Sep 20 '10 at 01:43

score 0 · Answer 3 · answered Sep 20 '10 at 01:26

0

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

answered Sep 20 '10 at 01:26

Andy Hume

40,474
10
47
58

that doesn't animate though, in my code i have it fading from color to color, it makes it look a lot smoother and nicer. – android.nick Sep 20 '10 at 10:04
Oh yes, I hadn't spotted that. You could use CSS transitions to achieve that effect. Would only work in Safari and Chrome for now, but a nice bit of progressive enhancement. – Andy Hume Sep 20 '10 at 19:41

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

3 Answers3