What I THOUGHT was a basic jquery function

JavaScript
1

I’m trying to swap the class of an element when it’s clicked on. Using jquery 1.6.1, here’s what it looks like:


	$('.checked_container').click(function() {
		$(this).removeClass('checked_container').addClass('unchecked_container');
	});
	
	$('.unchecked_container').click(function() {
		$(this).removeClass('unchecked_container').addClass('checked_container');
	});

Now, for the sake of brevity…*i omitted some other stuff that is happening when they’re clicked on. The problem is that the click event for .unchecked_container is firing fine and the class is changed, BUT when clicked on again…*the ‘.checked_container’ click event is NOT firing.

I think this is pretty basic, but for some reason it’s not working.

Any ideas?

2

The event for .unchecked_container is not firing because at the moment the script is run there is no element with that class yet. There only is an element with that class after an element with .checked-container is clicked, but then it’s too late.
You might want to look at .live() to solve this. Something like


$('.checked_container .unchecked_container').live(function() {
  $(this).toggleClass('checked_container unchecked_container');
});

If you’re using jQuery > 1.4.2 .delegate() would be even better.
Suppose these elements are in an element with id “main”, you’d use


$('#main').delegate('.checked_container .unchecked_container', 'click', function() {
  $(this).toggleClass('checked_container unchecked_container');
});

HTH :slight_smile: