У меня клонируется список из селекта (для возможности стилизации). И мне нужно повесить на уже склонированный список еще один метод, но этот метод должен выполняться именно после того как отрендериться список, так как до рендера списка вообще не существует в дереве DOM.
Хотелось бы услышать "правильный" вариант реализации этой задачи именно на es6.
Вот код:
class DropDown {
constructor(options) {
this.select = options.select;
this.list = options.list;
// При загрузке страницы, начинается рендер нового списка из select`a
window.addEventListener('load', this.renderOptionsList.bind(this));
// А здесь вешается метод на уже склонированный список, но его еще нет.
this.list.addEventListener('click', this.showDropDown.bind(this));
}
renderOptionsList() {
const select = this.select;
const options = select.querySelectorAll('option');
let cloneList = document.createElement('ul');
cloneList.className = 'find-store-select-clone__list hide';
for (let i = 0; i < options.length; i++) {
let li = document.createElement('li');
li.className = 'find-store-select-clone__item';
li.textContent = options[i].value;
cloneList.appendChild(li);
}
select.closest('.find-store-select__wrapper').querySelector('.find-store-select-clone').appendChild(cloneList);
}
showDropDown(e) {
e.preventDefault();
console.log('Все работает');
}
}
let dropDown = new DropDown({
select: document.querySelector('.find-store-select__primal'), // это селект
list: document.querySelector('.find-store-select-clone__list') // а это список, которого до выполнения скрипта не существует
});
