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

113
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

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

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

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

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

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

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

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

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

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

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

122