отловить событие изменения странного выпадающего списка
На странице Друпал - есть выпадающий список вариаций товара.
Этот список управляет подзагрузкой Цены, артикула и рис. Но такое ощущение что он изменяет всю страницу, потому что вот это:
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);
|
Цитата:
Вы не могли бы хоть намекнуть как и почему? Спасибо огромнешее. |
miltorg,
1. Слушаем всё события change в документе в режиме useCapture(это отдельная тема, тут важно то, что без него глобально change не отловить). 2. Проверяем, что event.target (элемент который вызвал событие) соответствует селектору [id^="edit-product-id"] или является ребёнком элемента с таким селектором, путём попытки получения closest ближайшего такого элемента. 3. Если не нашли - прекращаем обработку. 4. Иначе - alert. Сам document переписать невозможно, так что слушатель висит всегда, что бы там на странице не менялось. |
Круто! Спасибо ещё раз.
|
| Часовой пояс GMT +3, время: 12:43. |