jQuery: after adding class to a new element, can't trigger event by clicking on that class

Question

Here's what I'm attempting: when I click on an element with the class .main, that class is reassigned to the next element. When the next element (the new .main element) is clicked on, .main is reassigned to the next element, and so on. Here's my code:

$('.main').click(function() {
  $(this).removeClass("main").addClass("other");
  $(this).next().removeClass("other").addClass("main");
});

When I click on the original .main element, the class is transferred. However, clicking on the new .main element does not trigger the event again. What causes this? Am I going about this entirely the wrong way?

Here's a fiddle:

http://jsfiddle.net/UHLft/2/

Answer 1

Events are bound to the DOM nodes, not the class-names (though the class-names are, of course, used to initially select the relevant element(s)); so when the class-name changes the events are no longer bound, so you need to delegate the event-handler to the parent with on():

$('#container').on('click', '.main', function () {
    $(this).removeClass("main").addClass("other");
    $(this).next()
        .removeClass("other").addClass("main");
});

JS Fiddle demo.

References:

• on().