Как получить дочерние элементы и повесить на них listener?

Question

[Дмитрий Дев]

я пытаюсь повесить событие на выбор значение в .select, но не пойму как перебрать дочерние элементы.

let select = document.getElementsByClassName('select');
let child = select.childNodes;
console.log(child);

.select не задан явно в DOM, он появляется благодаря библиотеки, которая формирует новый блок с селектами из тех чтобы были в DOM с классом .js-lib-select. При этом файл со скриптом multiSelectListener.js идет после библиотеки select.js и имеет bx.ready аналог jQuery document.ready, но querySelectorAll() всё равно его не находит, а getElementsByClassName() находит.

Answer 1

[Rsa97]

А вам не нужны для этого дочерние ноды. Событие change срабатывает на самом select'е.

Comments

[Дмитрий Дев]

Rsa97 я попробовал

select.addEventListener('change', function () {
	console.log('check');
});

и так

select.forEach(element => {
		element.addEventListener('change', function () {
			console.log('foreach')
		})
	});

но так ошибка is not a function

Или я Вас не понял?

[Rsa97]

Дмитрий Климантович,

[Дмитрий Дев]

Rsa97 Подправил вопрос, прошу прощения за недостаточную инфу с самого начала.

[Rsa97]

Дмитрий Климантович, Для динамически создаваемых элементов используйте всплытие событий, вешая обработчик на общего фиксированного родителя. Поменял пример выше.

Answer 2

[v3shin]

let selects = document.querySelectorAll('.select');
selects.forEach(select => {
    select.addEventListener(...);
});

Comments

[Дмитрий Дев]

v3shin так не срабатывает, потому что элемент еще не сформирован. Через jQuery пробовал. Это вторая проблема, там тоже непонятно.

[v3shin]

Дмитрий Климантович, печальная история потому что с этого надо было начинать. =)
Тогда навесьте событие click на document, и там уже внутри разбирайтесь, куда кликнул пользователь.

[Дмитрий Дев]

v3shin, как вариант. Но я читал, что когда используем getElementsByClassName получаем коллекцию, которая имеет состояние на текущий момент. И да она находит эти .select, но ничего дальше с этим не получается сделать.

[v3shin]

Дмитрий Климантович, querySelectorAll тоже отображает состояние "на текущий момент".

selects.forEach(select => {
    select.addEventListener('click', function (e) {
        console.log(e.target);
    });
});

Дальше сами.

[Дмитрий Дев]

v3shin Подправил вопрос, прошу прощения за недостаточную инфу с самого начала.

Answer 3

[historydev]