click event handler not working after class changed

Question

If the user clicks on one of the ul s then the color and the class should be changing. I solved it with this code, but I noticed that the event handlers are not working anymore after I change the class.

The ul s should change their color on each click.

 $("ul.AAA").click(function() { $(this).css("background-color", "yellow"); $(this).removeClass("AAA"); $(this).addClass("BBB"); }) $("ul.BBB").click(function() { $(this).css("background-color", "blue"); $(this).removeClass("BBB"); $(this).addClass("AAA"); }) 

 div#start { border: 1px solid black; cursor: pointer; } ul.AAA { background-color: red; } ul.BBB { background-color: green; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <ul class="AAA"> <li> <p>LIST 1</p> </li> <li> <div> <div>A</div> <div>B</div> <div>C</div> </div> </li> </ul> <ul class="BBB"> <li> <p>LIST 2</p> </li> <li> <div> <div>A</div> <div>B</div> <div>C</div> </div> </li> </ul> 

---

I also tried it with on :

 $("ul.AAA").on("click", function() { $(this).css("background-color", "yellow"); $(this).removeClass("AAA"); $(this).addClass("BBB"); }) $("ul.BBB").on("click", function() { $(this).css("background-color", "blue"); $(this).removeClass("BBB"); $(this).addClass("AAA"); }) 

 div#start { border: 1px solid black; cursor: pointer; } ul.AAA { background-color: red; } ul.BBB { background-color: green; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <ul class="AAA"> <li> <p>LIST 1</p> </li> <li> <div> <div>A</div> <div>B</div> <div>C</div> </div> </li> </ul> <ul class="BBB"> <li> <p>LIST 2</p> </li> <li> <div> <div>A</div> <div>B</div> <div>C</div> </div> </li> </ul> 

How can I solve this problem?

Answer 1

As you're changing classes dynamically you need to use on() , however you need to use the delegated version of it. Try this:

 $(document).on("click", "ul.AAA", function() { $(this).css("background-color", "yellow"); $(this).toggleClass("AAA BBB"); }) $(document).on("click", "ul.BBB", function() { $(this).css("background-color", "blue"); $(this).toggleClass("AAA BBB"); }) 

 div#start { border: 1px solid black; cursor: pointer; } ul.AAA { background-color: red; } ul.BBB { background-color: green; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <ul class="AAA"> <li> <p>LIST 1</p> </li> <li> <div> <div>A</div> <div>B</div> <div>C</div> </div> </li> </ul> <ul class="BBB"> <li> <p>LIST 2</p> </li> <li> <div> <div>A</div> <div>B</div> <div>C</div> </div> </li> </ul> 

Also note the use of toggleClass() over addClass() and then removeClass()

Answer 2

Currently what you are using is called a "direct" binding which will only attach to element that exist on the page at the time your code makes the event binding call.

You need to use Event Delegation using .on() delegated-events approach, when manipulation selector (like removing and adding classes).

General Syntax

$(document).on('event','selector',callback_function)

Example

$(document).on("click", "ul.AAA", function() {
    //Rest of your code
});

In place of document you should use closest static container.

The delegated events have the advantage that they can process events from descendant elements that are added to the document at a later time. By picking an element that is guaranteed to be present at the time the delegated event handler is attached, we can use delegated events to bind the click event to dynamically created elements and also to avoid the need to frequently attach and remove event handlers.

A good read Direct and delegated events

Answer 3

 $(document).on("click","ul.AAA",function() {//delegate the event to document //$(this).css("background-color", "yellow"); $(this).removeClass("AAA"); $(this).addClass("BBB"); } ) $(document).on("click","ul.BBB",function() {//delegate the event to document //$(this).css("background-color", "blue"); $(this).removeClass("BBB"); $(this).addClass("AAA"); } ) 

 div#start { border: 1px solid black; cursor: pointer; } ul.AAA { background-color: red; } ul.BBB { background-color: green; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <ul class="AAA"> <li> <p>LIST 1</p> </li> <li> <div> <div>A</div> <div>B</div> <div>C</div> </div> </li> </ul> <ul class="BBB"> <li> <p>LIST 2</p> </li> <li> <div> <div>A</div> <div>B</div> <div>C</div> </div> </li> </ul>