jquery event fires on item's previous class

Question

I use a jquery function on a div.class. In the function I change the class on $(this) so that the function may only be called once per div. Inspecting the element with Firefox web developer options shows the class as changed, yet the click event for the original class will still fire on the element with the new class. Code below; I also tried to implement this with toggleClass, exact same results. Any suggestions?

$('div.cluebox').click(function(e) {        
    $( this ).removeClass("cluebox").addClass("emptyBox");;     
});

Thanks

Event handlers aren't bound to classes, they are bound to elements. Even if you change the class, the element still has the same handler bound to it. You can get around this using event delegation with `on()`. — Jason P, Sep 27 '13 at 14:49

score 1 · Answer 1 · answered Sep 27 '13 at 14:50

1

When you bind an event (click) to an object, the event stays bound to it until you unbind it. You may be able to simply use the on function instead of click()

answered Sep 27 '13 at 14:50

Dutchie432

28,798
20
92
109

score 1 · Answer 2 · answered Sep 27 '13 at 14:50

1

If you want bind event once use jQuery one()

http://api.jquery.com/one/

answered Sep 27 '13 at 14:50

Maciej Pyszyński

9,266
3
25
28

Thanks, working now with one() – user2823852 Sep 27 '13 at 15:06
If you're happy with this solution, mark answer as correct;) – Maciej Pyszyński Sep 27 '13 at 15:55

score 1 · Answer 3 · answered Sep 27 '13 at 14:51

1

Try with:

$('div.cluebox').click(function(e) {        
    $( this ).removeClass("cluebox").addClass("emptyBox");
    $( this).off("click");
});

answered Sep 27 '13 at 14:51

Vishkey

197
6

This have a lot of drawbacks like unbinding all click events. Use `one()` binding or `events namespaces` – Maciej Pyszyński Sep 27 '13 at 14:52

jquery event fires on item's previous class

3 Answers3