javascript - 单击事件处理程序在类更改后不工作

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()，但是您需要使用它的委托(delegate)版本。试试这个:

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

还要注意 toggleClass() 在 addClass() 上的使用，然后是 removeClass()