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次。 我使用一些是因为每次页面运行时它的行为并不总是相同的。

我曾试图描述的解决方案这篇文章 （ off() unbind() stopPropagation()但没有奏效。

使用谷歌Chrome浏览器的调试工具，好像在断点处， this指的是HTML元素两次，每次的每次迭代，尽管一些点击射击一次，有的三次。

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

Answer 1

您在类的每个循环上运行a，因此它将为该类的每个元素创建一个新的事件处理程序。 如果只需要一个事件处理程序，则需要这样编写：

$(".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

使用类调用click事件，并使用.html()获得点击值

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

JSFiddler