Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 10.05.2024, 18:45
Кандидат Javascript-наук
Отправить личное сообщение для miltorg Посмотреть профиль Найти все сообщения от miltorg
 
Регистрация: 19.09.2019
Сообщений: 143

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

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

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


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

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

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

Последний раз редактировалось miltorg, 10.05.2024 в 18:48.
Ответить с цитированием
  #2 (permalink)  
Старый 10.05.2024, 21:46
Аватар для voraa
Профессор
Отправить личное сообщение для voraa Посмотреть профиль Найти все сообщения от voraa
 
Регистрация: 03.02.2020
Сообщений: 2,718

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

Отлавливать изменение DOM надо с помощью MutationObserver
https://developer.mozilla.org/ru/doc...tationObserver
Ответить с цитированием
  #3 (permalink)  
Старый 10.05.2024, 22:32
Кандидат Javascript-наук
Отправить личное сообщение для miltorg Посмотреть профиль Найти все сообщения от miltorg
 
Регистрация: 19.09.2019
Сообщений: 143

Сообщение от voraa Посмотреть сообщение
Вполне вероятно, что он переписывается каким нибудь innerHTML.
Да. Именно это и происходит. Поэтому я и использовал:

"[id^=edit-product-id]"
Ответить с цитированием
  #4 (permalink)  
Старый 10.05.2024, 22:43
Кандидат Javascript-наук
Отправить личное сообщение для miltorg Посмотреть профиль Найти все сообщения от miltorg
 
Регистрация: 19.09.2019
Сообщений: 143

Оно меняет id="edit-product-id---1" на id="edit-product-id---2" и тд.
Ответить с цитированием
  #5 (permalink)  
Старый 10.05.2024, 22:48
Кандидат Javascript-наук
Отправить личное сообщение для miltorg Посмотреть профиль Найти все сообщения от miltorg
 
Регистрация: 19.09.2019
Сообщений: 143

Сообщение от voraa Посмотреть сообщение

Отлавливать изменение DOM надо с помощью MutationObserver
https://developer.mozilla.org/ru/doc...tationObserver
https://ru.stackoverflow.com/questio...B5%D0%B3%D0%B0


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

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

Спасибо
Ответить с цитированием
  #6 (permalink)  
Старый 10.05.2024, 23:17
Аватар для voraa
Профессор
Отправить личное сообщение для voraa Посмотреть профиль Найти все сообщения от voraa
 
Регистрация: 03.02.2020
Сообщений: 2,718

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

"[id^=edit-product-id]"
Но вы выполняете
let tov = document.querySelector("[id^=edit-product-id");
 
tov.onchange = function(){alert(55555)};

Только один раз, когда страница загрузилась.
Если после этого код поменялся через innerHTML, то это не значит что tov будет указывать на новый элемент и к новому элементу сам ни с того ни с сего прилепится обработчик.
Ответить с цитированием
  #7 (permalink)  
Старый 10.05.2024, 23:19
Аватар для voraa
Профессор
Отправить личное сообщение для voraa Посмотреть профиль Найти все сообщения от voraa
 
Регистрация: 03.02.2020
Сообщений: 2,718

Сообщение от miltorg
--- Тут написано что работа с DOM - это тормоза и не во всех браузерах.
Цитата:
Вопрос задан 8 лет 6 месяцев назад
Нормально все работает
Ответить с цитированием
  #8 (permalink)  
Старый 10.05.2024, 23:49
Кандидат Javascript-наук
Отправить личное сообщение для miltorg Посмотреть профиль Найти все сообщения от miltorg
 
Регистрация: 19.09.2019
Сообщений: 143

Сообщение от voraa Посмотреть сообщение
Но вы выполняете
let tov = document.querySelector("[id^=edit-product-id");
 
tov.onchange = function(){alert(55555)};

Только один раз, когда страница загрузилась.
Если после этого код поменялся через innerHTML, то это не значит что tov будет указывать на новый элемент и к новому элементу сам ни с того ни с сего прилепится обработчик.
А как же быть?
Ответить с цитированием
  #9 (permalink)  
Старый 11.05.2024, 01:49
Кандидат Javascript-наук
Отправить личное сообщение для miltorg Посмотреть профиль Найти все сообщения от miltorg
 
Регистрация: 19.09.2019
Сообщений: 143

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

Я вообще в тупике.
Ответить с цитированием
  #10 (permalink)  
Старый 11.05.2024, 04:54
Аватар для Aetae
Тлен
Отправить личное сообщение для Aetae Посмотреть профиль Найти все сообщения от Aetae
 
Регистрация: 02.01.2010
Сообщений: 6,514

document.addEventListener('change', function(event) {
  var product = event.target.closest('[id^="edit-product-id"]');
  if(!product) return;
  
  alert(55555)
}, true);
__________________
29375, 35
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Условие для выпадающего списка osetr Общие вопросы Javascript 6 07.11.2014 14:41
Событие при выборе элемента из выпадающего списка в input type="email" Алексей Горохов Events/DOM/Window 4 27.12.2013 10:38
Динамическое добавление выпадающего списка В IE stepennwolf Internet Explorer 3 04.11.2011 17:36
Заполнить список значениями из динамически созданного выпадающего списка zhuzha Элементы интерфейса 0 17.08.2010 14:40
Отловить событие изменения элемента pavl Events/DOM/Window 13 13.04.2009 14:00