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

您在类上为每个循环运行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());
                })
    });

here

jQuery单击多次触发

3 个答案: