отловить событие изменения странного выпадающего списка

[miltorg]

На странице Друпал - есть выпадающий список вариаций товара.
Этот список управляет подзагрузкой Цены, артикула и рис.
Но такое ощущение что он изменяет всю страницу, потому что вот это:

document.addEventListener('DOMContentLoaded', () => {
  let tov = document.querySelector("[id^=edit-product-id");

tov.onchange = function(){alert(55555)};
});

Срабатывает только один раз.

И при повторном выборе выпадающего списка - не происходит ничего.

Как отловить событие изменения такого списка? Спасибо.

[voraa]

Вполне вероятно, что он переписывается каким нибудь innerHTML. Поэтому переменная tov становится недействительной.
Надо как нибудь в devtools в браузере проверять. В отладчике или просматривать элементы (тот же список перед повторным выбором) и смотреть, установлен на нем обработчик или нет.

Отлавливать изменение DOM надо с помощью MutationObserver
https://developer.mozilla.org/ru/doc...tationObserver

[miltorg]

Вполне вероятно, что он переписывается каким нибудь innerHTML.

Да. Именно это и происходит. Поэтому я и использовал:

"[id^=edit-product-id]"

[miltorg]

Оно меняет id="edit-product-id---1" на id="edit-product-id---2" и тд.

[miltorg]

Отлавливать изменение DOM надо с помощью MutationObserver
https://developer.mozilla.org/ru/doc...tationObserver

https://ru.stackoverflow.com/questio...B5%D0%B3%D0%B0


--- Тут написано что работа с DOM - это тормоза и не во всех браузерах.

Может как то перезагрузить это DOM?

Спасибо

[voraa]

Да. Именно это и происходит. Поэтому я и использовал:

"[id^=edit-product-id]"

Но вы выполняете

let tov = document.querySelector("[id^=edit-product-id");
 
tov.onchange = function(){alert(55555)};

Только один раз, когда страница загрузилась.
Если после этого код поменялся через innerHTML, то это не значит что tov будет указывать на новый элемент и к новому элементу сам ни с того ни с сего прилепится обработчик.

[voraa]

--- Тут написано что работа с DOM - это тормоза и не во всех браузерах.

Вопрос задан 8 лет 6 месяцев назад

Нормально все работает

[miltorg]

let tov = document.querySelector("[id^=edit-product-id");
 
tov.onchange = function(){alert(55555)};

А как же быть?

[miltorg]

Там подгружаются карты с Яндекса и поэтому MutationObserver срабатывает раз 20 при загрузке и 2 раза - в дальнейшем.

Я вообще в тупике.

[Aetae]

document.addEventListener('change', function(event) {
  var product = event.target.closest('[id^="edit-product-id"]');
  if(!product) return;
  
  alert(55555)
}, true);