Почему не работает обработка click?

Question

[Dymok]

Есть такая простая разметка:

<div class="portfolio__gallery-filters">
  <a class="portfolio__gallery-filter portfolio__gallery-filter-all">
  <i class="icon-th"></i></a>
  <a class="portfolio__gallery-filter" href="#tab-business">Business</a>
  <a class="portfolio__gallery-filter" href="#tab-corporate">Corporate</a>
  <a class="portfolio__gallery-filter" href="#tab-photography">Photography</a>
  <a class="portfolio__gallery-filter" href="#tab-branding">Branding</a>
</div>

Есть маленький скрипт с jQuery:

var filterButtons = $(".portfolio__gallery-filters a"); //Получение массива со всеми кнопками
for (i = 0; i < filterButtons.length; i++) {
  filterButtons[i].click(function (e) { //Обработчик клика для каждой кнопки
    e.preventDefault();
    console.log(this.getAttribute('href'));
    });
}

Вроде бы всё просто, но не могу понять, почему ничего не происходит при клике на кнопку.
codepen

Answer 1

[Arman]

С jQuery обходить не нужно, он сам обойдет все элементы что нашел

$(".portfolio__gallery-filters a").click(function() {
   var $this = $(this);
   console.log($this.attr('href'));
   return false;
});

Comments

[Dymok]

Пасиб

Answer 2

[levchak0910]

// js
let filterButtons = document.querySelectorAll(".portfolio__gallery-filters a")
filterButtons.forEach(button => {
  button.addEventListener("click", function() {
    alert(this.getAttribute("href"))
  })
})

// jquery
$(".portfolio__gallery-filters a").click(function(e) {
  e.preventDefault();
  let href = $(this).attr("href");
  alert(href);
})