Javascript jQuery多次单击触发

更新：

似乎问题与我的代码无关。我一直在通过浏览器同步运行网页，这就是出现问题的地方。当我直接用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>

我也尝试过使用类选择器。它不起作用，我切换到

.each（）

和

$（this）

，以确保元素只被分配了一次事件处理程序

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

日志显示，每个按钮都被选中一次以分配一个单击侦听器，但当我实际单击按钮时，只有一些按钮被选中一次，而一些按钮被选中三次。我使用了一些，因为每次运行页面时，它的行为并不总是相同的

我已经尝试了中描述的解决方案 （

off（）

，

unbind（）

，

stopPropagation（）

），但都没有起作用

使用Google Chrome的调试器工具，似乎在断点处，

这个

在每次迭代中引用HTML元素两次，尽管有些单击会触发一次或三次

---

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

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

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

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

---

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

您的代码的问题就在这里

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

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

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

---

由于您已经在通过类名$（“.btn filter”）进行选择，因此应将该函数添加到所有元素中。

使用类调用click事件，并使用

.html（）获取clicked值。

---

使用

“.btn filter”

您已经选择了所有按钮（使用该类），并且可以将一个处理程序绑定到所有按钮。我尝试了使用类选择器为类中的每个元素分配一个侦听器，但结果是一样的。我切换到

each（）

和

this

以调试此代码是否被意外调用多次，意思是

$（“.btn筛选器”）。each（）

被调用多次，例如，在另一个事件处理程序中？您需要提供一个，因为它本身显示的代码不应该导致您看到的内容，我无法复制：-每次单击只触发一次。问题一定在别的地方。对不起，我没有在帖子中澄清；我也尝试过同样的结果。我切换到

.each（）

，试图弄清事件处理程序是否已被多次注册。请注意，这实际上与OP的代码相同。两者都使用循环在每个元素上放置事件侦听器<代码>$（“.btn filter”）.click（）将在内部执行循环同样，我在JS时有点新手，所以我想确定一下，我在类上使用了

.each（）

，但在该调用的范围内，我使用$（this）来分配单击，这样应该只执行类中的一个元素，对吗？您仍然需要有一种方法来指定单击按钮时要执行的操作。通常这是通过id或数据值完成的。否则，如果您单击任何按钮，将运行完全相同的代码尽管我和您在同一条轨道上，Daniel，我用原始代码做了一个简单的测试。无法复制所描述的行为：我已更新帖子以澄清这是我的初始代码，它不起作用，并导致我执行

。each（）

和

$（this）

，以确保我没有重新注册事件处理程序。您确定没有从多个位置初始化/声明函数吗？t代码由函数包装，在文档准备就绪时调用函数。另外，一些按钮按预期触发一次，但其他按钮触发三次，所以虽然我考虑过这一点，但我使用它的方式没有问题。这看起来像是浏览器同步问题。

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

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