类更改后，单击事件处理程序不起作用

Question

如果用户单击ul之一，则颜色和类别应在更改。 我用这段代码解决了它，但是我注意到在更改类后事件处理程序不再起作用。

每次单击时， ul都应更改其颜色。

 $("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> 

---

我也尝试了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> 

我怎么解决这个问题？

Answer 1

在动态更改类时，需要使用on() ，但是需要使用它的委托版本。 尝试这个：

 $(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> 

另请注意，在addClass()之后使用toggleClass() addClass() ，然后在removeClass()

Answer 2

当前，您所使用的被称为“直接”绑定，它将仅附加到您的代码进行事件绑定调用时页面上存在的元素。

在操纵选择器（例如删除和添加类）时，需要使用.on（）委托事件方法使用事件委托。

一般语法

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

例

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

代替document您应该使用最近的静态容器。

委托事件的优点是，它们可以处理以后在后代添加到文档中的后代元素中的事件。 通过选择在附加委托事件处理程序时保证存在的元素，我们可以使用委托事件将click事件绑定到动态创建的元素，并且还避免了频繁附加和删除事件处理程序的需要。

良好阅读直接事件和委托事件

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>