javascript - 为什么在删除 className 后会触发附加到 className 的单击事件？

Question

相关:Jquery timeout for doubleclick

鉴于此代码:

function handleClick() {
  var div = $(this);
  var original = $(this).html();
  div.html("Tap again");
  $(".onlyfire").addClass("fire").off("click");
  $(".fire").one("click", function(fire) {
    alert("this should not be showing once the text is changed back to original");
    $(this).off("click")
  });
  setTimeout(function() {
    $(div).html(original);
    $(".onlyfire").removeClass("fire").click(handleClick);
  }, 2000);
}

function onlyfire() {
  $(".onlyfire").click(handleClick);
};
onlyfire();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js">
</script>
<div class="onlyfire">
  Do Something
</div>

fire className已从 .onlyfire 中删除以下元素 2000ms ，其中预期结果为 click附加到 .fire 的事件也会变得不适用，因为不会有 .fire document 内的元素。

但是，正如 @120382833 在 comment 所指出的那样

Click on Do something, wait for 2 seconds until the Do Something is back, Click again and it will show the alert.. And it shouldn't.. It should display tap again and only if you click in first 2 seconds the alert should show up.

重现

1. 检查.onlyfire元素位于 console ;
2. 点击.onlyfire元素；
3. 两秒钟内不执行任何操作；
4. 原文应设置为.onlyfire元素；
5. .fire className将从 .onlyfire 中删除元素；
6. 点击.onlyfire再次元素
7. 处理程序附加到 .fire元素被调用，依次调用alert("this should not be showing once the text is changed back to original") ，虽然没有.fire元素存在于document中那时

问题:这是 jQuery 错误还是预期行为？或者，我们是否忽略了 javascript 中的某些内容这可以解释结果吗？

Answer 1

这是预期的行为。

附加事件处理程序后，对该元素所做的类更改不会影响事件将触发事件处理程序的事实。该类仅在查找要附加处理程序的元素时发挥作用。一旦完成，类选择器就不再发挥作用。