更改后如何使用 jQuery Select CSS 类

发布于02月22日

我有一个按钮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>

推荐答案

导致该问题的原因是在页面加载时绑定事件处理程序，而不是在按下按钮时.在页面加载时，没有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>