Как отследить появление новых элементов в DOM?

Есть div, в который по нажатию кнопки сторонним плагином добавляются новые элементы DOM (создаётся модальное окно), и после того как оно появилось, нужно сразу же произвести пару действий. Например, заменить значение в текстовом поле и изменить значение атрибута. Проблема в том, как отследить, что это текстовое поле появилось, и как изменить его атрибуты после того как оно появилось?

P.S. Лезть в плагин сторонний нет возможности, так как он обновляется и всё слетит после обновления.
  • Вопрос задан
  • 30968 просмотров
Решения вопроса 3
mlnkv
@mlnkv
JavaScript Developer
https://developer.mozilla.org/ru/docs/Web/API/Muta...

// выбираем нужный элемент
var target = document.querySelector('#some-id');

// если jQuery
var target = $('#some-id')[0];
 
// создаем новый экземпляр наблюдателя
var observer = new MutationObserver(function(mutations) {
  mutations.forEach(function(mutation) {
    console.log(mutation.type);
  });    
});
 
// создаем конфигурации для наблюдателя
var config = { attributes: true, childList: true, characterData: true };
 
// запускаем механизм наблюдения
observer.observe(target,  config);
 
// позже, если надо, прекращаем наблюдение
observer.disconnect();
Ответ написан
@iShatokhin
JS developer
$(elem).on("DOMNodeInserted", function (event) { /* ваш код */ });
Ответ написан
Пригласить эксперта
Ответы на вопрос 3
Попробуй LiveQuery.
Был такой же вопрос, надо было кастомить кнопку, которая прилетала со стороннего сервиса.
Ответ написан
Комментировать
Raz-Dva
@Raz-Dva
$("#modInfo").on('shown.bs.modal', function(e){ ... });
При появлении(shown) модального окна над ним можно выполнять какие-нибудь действия. Для bootstrap мод. окна это точно работает.
Ответ написан
Комментировать
@Bluorenge
Junior front-end developer
const elementReady = (parent, selector) => {
  return new Promise(resolve => {
    let el = parent.querySelector(selector)
    if (el) {
      resolve(el)
    }
    new MutationObserver((mutationRecords, observer) => {
      // Query for elements matching the specified selector
      Array.from(parent.querySelectorAll(selector)).forEach(element => {
        resolve(element)
        // Once we have resolved we don`t need the observer anymore.
        observer.disconnect()
      })
    }).observe(parent.documentElement, {
      childList: true,
      subtree: true,
    })
  })
}

Или вот плагин
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы