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 进行描述

编辑：在得知你有这个之后，我会补充说你提供的任何东西都不会导致你收到的错误。

Answer 2

你的代码有问题

$(".btn-filter")**.each**(function() {

你应该通过简单地做这样的事情来简化它

$(".btn-filter").click(function(e) {
      e.preventDefault();
      e.stopPropagation();
      console.log(e); 
  debugger;
})

由于您已经通过类名 $(".btn-filter") 进行选择，因此应该将函数添加到所有元素中。

Answer 3

使用类调用点击事件并使用.html()获取点击值

$(document).ready(function () {
        $(".btn-filter").click(function() {
                    alert($(this).html());
                })
    });

JSFiddler