javascript onclick в цикле, навешивание события на подгруженные элементы

124
11 августа 2019, 06:50
<div class="wrap">
    <div class="elem">
        <a class="item" data-type="first">test</a>
    </div>
    <div class="elem">
        <a class="item" data-type="first">test</a>
    </div>
    <div class="elem">
        <a class="item" data-type="first">test</a>
    </div>
</div>

как при клике по .item обновлять все .item (их может быть разное количество, ответ бэка), меняя data-type на second, third (может несколько раз выполняться) и т.д на чистом js? копирую элементы в отдельную переменную вешаю в цикле click, не работает для подгруженных элементов (само собой), очищаю wrap, добавляю элементы.

сравниваю data-type после цикла с сохраненными элементами, но т.к элементы могли не успеть подгрузиться, получаем совпадение. нашел решение через setTimeout, что попахивает говнокодом.

как сделать технически грамотно?

Answer 1

Как-то так, думаю.

var startList = 1; 
var listLimit = 10; 
var listLength; 
var wrapper = document.getElementById('wrapper'); 
var times = 1; 
 
buildList(); 
 
 
 
function buildList() { 
  wrapper.innerHTML = ''; 
  listLength = Math.round(Math.random() * listLimit); 
  for ( var idx = startList; idx < (startList + listLength); idx++) { 
    console.log(idx); 
    getTodo(idx) 
      .then(function(todo) { 
        var elem = document.createElement('div'); 
        elem.classList.add('elem'); 
        elem.innerHTML = '<a class="item" data-type="' + times.toString() +'">' + todo.title + '</a>'; 
        elem.addEventListener('click', buildList, false); 
        wrapper.appendChild(elem); 
      }); 
  } 
  startList += listLength; 
  times++; 
} 
 
function getTodo(id) { 
  return fetch('http://jsonplaceholder.typicode.com/todos/' + id.toString()) 
  .then(function(res) {return res.json();}) 
  .catch(function(err) {throw(err);}); 
}
#wrapper { 
  min-height: 100px; 
  min-width: 100px; 
  background-color: #ccc; 
}
<div id="wrapper"> 
</div>

READ ALSO
Как добавить атрибут role с помощью чистого JS

Как добавить атрибут role с помощью чистого JS

Помогите пожалустаИмею такую "непростую"ситуацию

107
Не отображается Highcharts график

Не отображается Highcharts график

Подключил все правильно ,вставил график тоже вроде правильно ,а на экран ничего не выводитВ чем проблема?

113
Поиск в объекте по числу

Поиск в объекте по числу

Помогите пожалуйстаИмею поле поиска и объект:

113
Массив объектов JS

Массив объектов JS

Столкнулся с таким вот вопросом:

132