Cannot remove or add class using jQuery

Question

I am trying to operate a toggle class on an element but cannot use the toggleClass facility as the script is running other functions and is being actioned on the classname. Therefore I am using removeClass / addClass. For some reason I cannot get it working. Please find my script below;

$(".view-followers").click(function(){
    alert("off");
    $(this).removeClass("view-followers");
    $(this).addClass("view-followers-on");

});

$(".view-followers-on").click(function(){
    alert("on");
    $(this).removeClass("view-followers-on");
    $(this).addClass("view-followers");
});

or you can view is on jsFiddle; http://jsfiddle.net/dannyj6/UGBda/

Thank you for any help you can provide

close enough: http://stackoverflow.com/questions/203198/event-binding-on-dynamically-created-elements — John Dvorak, Sep 09 '13 at 11:19

score 4 · Accepted Answer · answered Sep 09 '13 at 11:18

Try

$(".view-followers, .view-followers-on").click(function(){
    $(this).toggleClass("view-followers view-followers-on");
});

Demo: Fiddle

if you want to have two separate handlers then use event delegation

$(document).on('click', '.view-followers', function(){
    $(this).removeClass("view-followers").addClass("view-followers-on");

});
$(document).on('click', '.view-followers-on', function(){
    $(this).removeClass("view-followers-on").addClass("view-followers");
});

Demo: Fiddle

Ram · Answer 2 · 2013-09-09T11:25:54.397

That's because when the page is loaded there is not element with class of view-followers-on, so jQuery can't find the target element, you should delegate the event, but I would suggest adding another class and using toggleClass method(in case that you are using 2 handlers just for adding and removing classes):

$(".follow").on('click', function(){
    $(this).toggleClass("view-followers view-followers-on");            
});

_{Usually there is no need to toggle 2 classes, using one class is enough.}

score 1 · Answer 3 · answered Sep 09 '13 at 11:20

The click handlers will be attached when the script gets executed for the first time. This means that the element with the class "view-followers-on" doesn't exist, yet. They are attached to the element itself, that is why only the first handler is called.

score 0 · Answer 4 · answered Sep 09 '13 at 11:19

0

It works but the problem is you must reassign the handler for "-on" and remove the handler for off. It is probably better to use a extra class for the handler which checks for the current state and replaces the state.

answered Sep 09 '13 at 11:19

tea2code

1,007
1
8
15

Steve Papa · Answer 5 · 2013-09-09T11:31:00.207

This function looks for either of the two classes, view-followers OR view-followers-on.

If either of these are detected, it will toggle the two classes on the selector, essentially toggling the class that is applied to the element.

This will also work on dynamic elements as it uses event delegation to detect elements created after page load.

$(document).on('click', '.view-followers,.view-followers-on', function(){
    $(this).toggleClass("view-followers view-followers-on"); 
});

score 0 · Answer 6 · answered Sep 09 '13 at 11:32

0

use the toogleClass() function it will call alternative

$(".view-followers, .view-followers-on").click(function(){
    $(this).toggleClass("view-followers view-followers-on");
})

;

answered Sep 09 '13 at 11:32

Ashisha Nautiyal

1,389
2
19
39

Cannot remove or add class using jQuery

6 Answers6