Jquery add/remove class not working

Question

I've got some jQuery that I'm using to change a class of two elements. It works once, and the elements change class once, but I want it to work interchangeably. so when they click they click the 'deselected' button it assigns itself the 'selected' class, and the 2nd button changes to a 'deselected' class. Here's the jQuery:

$('.network_bar_deselected').on('click', function(){
    $('.network_bar_selected').removeClass('network_bar_selected').addClass('network_bar_deselected');
    $(this).removeClass('network_bar_deselected').addClass('network_bar_selected');
});

and the HTML is quite simple:

<a href="#"><div class="network_bar_selected"><h4>Network Updates</h4></div></a>
<a href="#"><div class="network_bar_deselected"><h4>Latest Tweets</h4></div></a>

yep the quote is in the original source, there was a mistake when I transferred across to here, im aware haha — Whirlwind990, May 19 '15 at 01:52
Dupe of http://stackoverflow.com/questions/203198/event-binding-on-dynamically-created-elements — j08691, May 19 '15 at 01:55

score 3 · Answer 1 · answered May 19 '15 at 01:52

Add the handler to both the classes

$('.network_bar_selected, .network_bar_deselected').on('click', function () {
    $('.network_bar_selected').removeClass('network_bar_selected').addClass('network_bar_deselected');
    $(this).removeClass('network_bar_deselected').addClass('network_bar_selected');
});

Demo: Fiddle

score 3 · Accepted Answer · answered May 19 '15 at 01:54

Since you're changing classes dynamically, you should use delegation:

$(document).on("click", ".network_bar_deselected", function() {
    $('.network_bar_selected').removeClass('network_bar_selected').addClass('network_bar_deselected');
    $(this).removeClass('network_bar_deselected').addClass('network_bar_selected');
});

Your original code only binds the handler to the elements with the network_bar_selected class when the document is loaded, not to elements that get that class later.

Jquery add/remove class not working

2 Answers2