類更改后，單擊事件處理程序不起作用

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>