Как добавить EventListener на все элементы dom, которые имеют определенный класс? - PullRequest
Новая
       15

Как добавить EventListener на все элементы dom, которые имеют определенный класс?

0 голосов
/ 09 мая 2018

У меня есть некоторый диапазон в моем DOM, который имеет класс = "foo", и все диапазоны создаются динамически.

С помощью TypeScript я хочу добавить событие onClick для всех из них после их создания.

У меня есть что-то вроде этого: 

var foos = document.body.querySelectorAll(".foo");
foos.forEach(function (item) {            
    item.addEventListener("click", () => { 
        console.log(item); 
    });
});

Но я не могу сделать forEach для NodeListOf.

foos = Array.from (foos) не работает, потому что: «from» не существует для типа «ArrayConstructor».

Ответы [ 3 ]

0 голосов
/ 09 мая 2018

Поскольку вы отметили свой вопрос как jquery, вот способ jquery: 

$(".foo").click( function() { 
   // Do something here
});
0 голосов
/ 09 мая 2018

Я сделал три разных подхода, которые вы можете использовать, они очень просты, пожалуйста, откройте каждый фрагмент кода, чтобы увидеть, как он работает.

1 - В этом примере показано, как добавить слушателя ПОСЛЕ создание элементов. 

for (var i = 0; i < 4; i++){
  var a = document.createElement('input');
  a.type = 'button';
  a.value = 'click me ' + i;
  a.className = 'foo';
  document.body.append(a);
}

//JQUERY WAY
$('.foo').on('click', function(){
  console.log(this.value);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

2 - В этом примере показано, как добавить слушателя ДО создания элементов. 

//JQUERY WAY
$(document).on('click', '.foo', function(){
  console.log(this.value);
});

for (var i = 0; i < 4; i++){
  var a = document.createElement('input');
  a.type = 'button';
  a.value = 'click me ' + i;
  a.className = 'foo';
  document.body.append(a);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

3 - И наконец, если вам не нужен jQuery, вот пример Vanilla JS :

for (var i = 0; i < 4; i++){
  var a = document.createElement('input');
  a.type = 'button';
  a.value = 'click me ' + i;
  a.className = 'foo';
  document.body.append(a);
}

//VANILLA JS WAY
var myElems = document.querySelectorAll('.foo');
myElems.forEach(function(elem){
  elem.onclick = function(){
    console.log(elem.value);
  }
});
0 голосов
/ 09 мая 2018

Используйте для этого простой цикл for. Вы можете получить элементы для каждого индекса в массиве foos и назначить им событие click. Это потому, что querySelectorAll возвращает NodeList, который индексируется как массив, но не как массив, поэтому вы не можете вызывать методы массива для него, поскольку он не является реальным массивом. 

var foos = document.body.querySelectorAll(".foo"));
for(var i=0; i<foos.length; i++){
    foos[i].addEventListener("click", () => { 
        console.log(item); 
    });
});
...