Question

这是示例代码：

$("#item > button:not(.finished)").on("click", function() {
  console.log("fired");
  $(this).addClass("finished");
})

$("#item > button.finished").on("click", function() {
  console.log("finished");
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="item">
  <button type="button" class="">Text</button>
</div>

出于某种原因，它总是记录为“已解雇。即使添加了该类。我没看到什么？

注意：按钮不是动态。

Answer 1

大卫·托马斯（David Thomas）在评论中指出了为什么您的代码无法按预期工作的原因

当代码为时，事件绑定到与选择器匹配的节点运行，在事件附加后更改类不会与事件绑定的区别

这就是为什么您总是看到fired登录到控制台的原因

这是您的代码的简化版本，可以按预期工作。

$("#item > button").on("click", function(e) {

  if(!(e.target.classList.contains('finished'))) {
      $(e.target).addClass("finished");
      console.log("fired");
  } else {
      console.log("finished");
  }

});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="item">
  <button type="button" class="">Text</button>
</div>

jQuery-按钮无法正确触发类

1 个答案: