отловить событие изменения странного выпадающего списка
На странице Друпал - есть выпадающий список вариаций товара.
Этот список управляет подзагрузкой Цены, артикула и рис. Но такое ощущение что он изменяет всю страницу, потому что вот это:
document.addEventListener('DOMContentLoaded', () => {
let tov = document.querySelector("[id^=edit-product-id");
tov.onchange = function(){alert(55555)};
});
Срабатывает только один раз. И при повторном выборе выпадающего списка - не происходит ничего. Как отловить событие изменения такого списка? Спасибо. |
Вполне вероятно, что он переписывается каким нибудь innerHTML. Поэтому переменная tov становится недействительной.
Надо как нибудь в devtools в браузере проверять. В отладчике или просматривать элементы (тот же список перед повторным выбором) и смотреть, установлен на нем обработчик или нет. Отлавливать изменение DOM надо с помощью MutationObserver https://developer.mozilla.org/ru/doc...tationObserver |
Цитата:
"[id^=edit-product-id]" |
Оно меняет id="edit-product-id---1" на id="edit-product-id---2" и тд.
|
Цитата:
--- Тут написано что работа с DOM - это тормоза и не во всех браузерах. Может как то перезагрузить это DOM? Спасибо |
Цитата:
let tov = document.querySelector("[id^=edit-product-id");
tov.onchange = function(){alert(55555)};
Только один раз, когда страница загрузилась. Если после этого код поменялся через innerHTML, то это не значит что tov будет указывать на новый элемент и к новому элементу сам ни с того ни с сего прилепится обработчик. |
Цитата:
Цитата:
|
Цитата:
|
Там подгружаются карты с Яндекса и поэтому MutationObserver срабатывает раз 20 при загрузке и 2 раза - в дальнейшем.
Я вообще в тупике. |
document.addEventListener('change', function(event) {
var product = event.target.closest('[id^="edit-product-id"]');
if(!product) return;
alert(55555)
}, true);
|
| Часовой пояс GMT +3, время: 01:27. |