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; /

Thank you for any help you can provide

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/dannyj6/UGBda/

Thank you for any help you can provide

• javascript
• jquery
• addclass
• removeclass

• close enough: stackoverflow./questions/203198/… – John Dvorak Commented Sep 9, 2013 at 11:19

6 Answers 6

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

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.}

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.

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.

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

use the toogleClass() function it will call alternative

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

;