jQuery click firing multiple times

Question

Update:

Seems like the problem has nothing to do with my code. I've been running the webpage over browser-sync and that's where the problem appears. When I open the static webpage in Chrome directly, everything seems to be working fine. Thank you to everyone for your help!

I'm working on my personal website and want to make a way to filter through my list of projects using buttons.

<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>

I'm trying to attach event listeners to the buttons by doing this, but it seems like the event listeners are being attached multiple times:

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

I have also tried using the class selector. It doesn't work, I switched to .each() and $(this) to be sure the elements were being assigned event handlers only once.

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

Logs show that each button is selected once to be assigned a click listener, but when I actually click the buttons, only some fire once, and some fire 3 times. I use some because it doesn't always behave the same way each time the page is run.

I have tried the solutions described in this post(off(), unbind(), stopPropagation()), but none have worked.

Using Google Chrome's debugger tools, it seems like at the breakpoint, this refers to the HTML element twice for every iteration of each, despite some clicks firing once and some three times.

I suppose I could just assign IDs and wire each button individually, but I want to know what I'm doing wrong here. Could anyone explain?

Answer 1

You are running a for each loop on the class, so it will create a new event handler for each element with the class. If you want just one event handler you need to write it like this:

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

Buttons that show or hide specific content are best described with a data value or id

Edit: after learning you had this before I will add that nothing you supplied is causing the error you are receiving.

Answer 2

The problem with your code is is here

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

You should simplify it by simply doing something like this

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

Since you are already selecting via the class name $(".btn-filter") the function should be added to all the elements.

Answer 3

Call click event using class and get clicked value using .html()

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

JSFiddler