javascript - jQuery 点击触发多次

Question

更新:

问题似乎与我的代码无关。我一直在通过浏览器同步运行网页，这就是问题出现的地方。当我直接在 Chrome 中打开静态网页时，一切似乎都正常。感谢大家的帮助!

我正在我的个人网站上工作，想找到一种方法来使用按钮过滤我的项目列表。

<div class="filters">
  <button class="btn btn-filter">Android</button>
  <button class="btn btn-filter">iOS</button>
  <button class="btn btn-filter">Web Dev</button>
  <button class="btn btn-filter">Data Science</button>
</div>

我试图通过这样做将事件监听器附加到按钮，但似乎事件监听器被附加了多次:

$(".btn-filter").each(function() {
  console.log(this); // #1
  $(this).click(function(e) {
      e.preventDefault();
      e.stopPropagation();
      console.log(this); // #2
  })
  debugger;
})

我也尝试过使用类选择器。它不起作用，我切换到 .each() 和 $(this) 以确保只为元素分配一次事件处理程序。

$('.btn-filter').click(...)

日志显示每个按钮都被选中一次以分配一个点击监听器，但当我实际点击按钮时，只有一些触发一次，有些触发 3 次。我使用一些是因为每次运行页面时它的行为方式并不总是相同。

我已经尝试过中描述的解决方案 this post (off()、unbind()、stopPropagation())，但均无效。

使用 Google Chrome 的调试器工具，似乎在断点处，this 每次迭代都引用 HTML 元素两次，尽管有些点击触发一次，有些点击触发三次。

我想我可以只分配 ID 并单独连接每个按钮，但我想知道我在这里做错了什么。谁能解释一下？

Answer 1

您正在类上运行 for each 循环，因此它将为类中的每个元素创建一个新的事件处理程序。如果你只需要一个事件处理程序，你需要这样写:

$(".btn-filter").click(function() {
  console.log($(this).text());
});

显示或隐藏特定内容的按钮最好用数据值或 id 来描述

编辑:在了解到您之前有此问题后，我将补充说您提供的任何内容都不会导致您收到错误。