Как выбрать все блоки с указанием типа c в JQuery?

Question

У меня есть несколько div в моем HTML -коде с типом «кнопка» (см. Код ниже). Как мне выбрать все эти кнопки и добавить к ним прослушиватель кликов в JQuery?

<div class="container">
      <div lass="row">
        <div type="button" id="green" class="btn green"></div>

        <div type="button" id="red" class="btn red"></div>
      </div>

      <div class="row">
        <div type="button" id="yellow" class="btn yellow"></div>
        <div type="button" id="blue" class="btn blue"></div>
      </div>
    </div>

Вот одна из вещей, которые я пробовал:

$('[class*="btn"]').click(function () {
  console.log("Method called!");
  $(this).addClass("pressed");
  setTimeout(function () {
    $(this).removeClass("pressed");
  }, 50);

}

Answer 1

Измените

$('[class*="btn"]').click(function () {

на

$('.btn').click(function () {

Однако привязка одного и того же события к нескольким элементам не является идеальным решением - это приведет к проблемам с производительностью, как только вы достигнете приличного количества элементы. Вместо этого делегирует событие родителю.

$('.container').on('click', '.btn', function () {

Answer 2

Попробуйте это как свой JS код:

$('.btn').click(function () {
  console.log("Method called!");
  $(this).addClass("pressed");
  var elem = $(this); // Use elem inside setTimeout function
  setTimeout(function () {
    elem.removeClass("pressed");
  }, 50);

});

Answer 3

С помощью jQuery вы можете выбирать элементы, используя селектор атрибутов CSS.

$('div[type="button"]').on('click', function() {
    console.log('clicked');
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
    <div lass="row">
        <div type="button" id="green" class="btn green">Button 1</div>
        <div type="button" id="red" class="btn red"></div>
    </div>
    <div class="row">
        <div type="button" id="yellow" class="btn yellow">Button 2</div>
        <div type="button" id="blue" class="btn blue">Button 3</div>
    </div>
</div>

Answer 4

Я думаю, что этот атрибут типа нельзя использовать с div. Попробуйте использовать классы или настоящие кнопки. Кстати, если бы type мог работать с div, jquery выглядел бы как div [type = "button"]