更改后如何使用 jQuery 选择 CSS 类答案

【问题标题】：How to select a CSS class with jQuery, after it is changed更改后如何使用 jQuery 选择 CSS 类
【发布时间】：2023-02-22 16:40:18
【问题描述】：

我有一个按钮 Edit，单击它会将所有按钮的类从 btn 更改为 btnDel。

因此，在点击Edit 之后，我预计会触发$('.btnDel').on('click', function() {...}。

但是 $('.btn').on('click', function() {...} 仍然被触发。

我错过了什么？

$('.btnEdit').on('click', function() {
  console.log("btnEdit was clicked");
  $(".btn").removeClass("btn").addClass("btnDel");
});

$('.btn').on('click', function() {
  console.log("btn was clicked");
});

$('.btnDel').on('click', function() {
  console.log("btnDel was clicked");
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<button class="btnEdit">Edit</button>
<br/><br/>
<button class="btn">1</button>
<button class="btn">2</button>
<button class="btn">3</button>

【问题讨论】：

它通过引用更改它，因此它仍然会触发。您需要在更改后绑定按钮..（还记得取消绑定以防止内存泄漏）
尽管更好的解决方案是不更改其类更改，而是为点击捕获更高的气泡并检测类，或者在回调中使用 if 条件来检测它

标签： jquery

【解决方案1】：

引起此问题的原因是您在页面加载时绑定了事件处理程序，而不是在您按下按钮时绑定。在页面加载时没有 btnDel 按钮，因此处理程序未绑定到任何元素。要解决它，您可以使用event delegation。

$('.btnEdit').on('click', function() {
  console.log("btnEdit was clicked");
  $(".btn").removeClass("btn").addClass("btnDel");
});

$('#delegator').on('click', '.btn', function() {
  console.log("btn was clicked");
});

$('#delegator').on('click', '.btnDel', function() {
  console.log("btnDel was clicked");
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<button class="btnEdit">Edit</button>
<br/><br/>
<div id=delegator>
  <button class="btn">1</button>
  <button class="btn">2</button>
  <button class="btn">3</button>
</div>

【讨论】：

著名的！多谢