Как я могу запустить скрипт каждый раз, когда элемент с определенным классом добавляется в DOM? - PullRequest
Новая
       60

Как я могу запустить скрипт каждый раз, когда элемент с определенным классом добавляется в DOM?

0 голосов
/ 03 марта 2020

У меня есть функция для изменения div определенного класса c, но проблема в том, что эти div загружаются и выгружаются динамически сторонним плагином WP, который я не могу изменить, и нет никаких действий щелчка, которые я могу связать к. Эти элементы могут появляться и исчезать в любой момент времени, и они входят в более сложный набор элементов. Плагин начинается с загрузки одного элемента div при загрузке страницы, а затем, при нажатии, загружает в него другие элементы div Эти внутренние div делятся по времени, и они исчезают по истечении времени ожидания, загружая другой набор div и так далее. Те, которые я пытаюсь изменить, не входят в первый набор при клике, поэтому я не могу привязать этот клик.

Из моего исследования здесь, посвященного StackOverflow и в других местах, я понимаю, что старый метод использование событий мутации с чем-то вроде DOMNodeInserted не рекомендуется, и следует использовать наблюдатель мутации, но я не могу обойти это.

Я пытался адаптировать two штук кода, который я нашел в ответах на другие вопросы здесь, но у меня это не сработало.

Лог c, который я использую, - это просмотр первого div-оболочки, который загружается при загрузке страницы .modal-survey-container, а затем, всякий раз, когда в него загружаются новые элементы div, моя функция должна срабатывать, если в поддереве присутствует моя действительная цель .msnumericanswer. До сих пор я пробовал это: 

var $j = jQuery;

$j(document).ready(function callback(records) {
  records.forEach(function (record) {
    var list = record.addedNodes;
    var l = list.length - 1;

    for ( ; l > -1; l-- ) {
      if (list[l].nodeClass === '.msnumericanswer') {
        $j('.msnumericanswer').each(function(i, obj) {
          var t = $j(obj).data('tooltip');
          $j(obj).prepend('<div class="labels">' + t + '</div>');
        });
        console.log(list[l]);
      }
    }
  });
  setTimeout(5000);
});

var observer = new MutationObserver(callback);
var targetNode = document.querySelectorAll(".modal-survey-container");
observer.observe(targetNode, { attributes: true, childList: true, subtree: true });

Это не работает и выдает две ошибки в консоли, говоря:

ReferenceError: обратный вызов не определен.
TypeError : records.forEach не является функцией.

Альтернативный лог c заключается в том, чтобы отследить создание родительского div моей цели .survey_table, поэтому я также попробовал это: 

var $j = jQuery;

var myElement = $j('.survey_table')[0];

var observer = new MutationObserver(function(mutations) {
  if (document.contains(myElement)) {
    $j('.msnumericanswer').each(function(i, obj) { //my working jQuery
      var t = $j(obj).data('tooltip'); //my working jQuery
      $j(obj).prepend('<div class="labels">' + t + '</div>'); //my working jQuery
    });
  }
});

observer.observe(document, {attributes: true, childList: true, characterData: false, subtree:true});

Это тоже не работает, но я не вижу ошибок в консоли.

Что я здесь не так делаю?

...