Как Bootstrap уведомляется об изменениях DOM?

Question

Множество плагинов Bootstrap сразу же работают, если некоторые data-*="xzy" атрибуты добавлены (в интерактивном режиме).

например. просто добавьте data-toggle="collapse" к тегу привязки и Свернутый Bootstrap присутствует, см. демонстрацию https://jsfiddle.net/4n5zrkpb/.

Я хочу знать:

• Какая технология позади? (Насколько я знаю, они не слушают мутационные события и не используют MutationObserver.)
• Могу ли я использовать его самостоятельно ;-)

---

ОБНОВЛЕНИЕ: Я не хочу Привязка событий к динамически создаваемым элементам? . Первоначально я хотел быть обновленным , когда новые элементы были созданы динамически! Но способ Bootstrap намного проще и обратно совместим: уведомляйте только в случае некоторого взаимодействия с пользователем (например, прослушивание всех событий щелчка).

Answer 1

По сути, это наблюдение элемента click в документе, отфильтрованного селектором атрибутов с помощью jQuery.

Это так

jQuery(document).on('click', '[data-toggle="collapse"]', doTheToggleMagic) 

Это означает, что каждый щелчок по документуреагировал, но только если источником события click был элемент с атрибутом data-toggle со значением collapse.

Итак, чтобы ответить на ваш вопрос в заголовке: Wordpress не уведомляется об изменениях DOMсовсем.Потому что это не нужно.Он реагирует только, если пользователь взаимодействует.

Answer 2

TL; DR

Используется функция jQuery .on() для присоединения к любому элементу на основе селектора [data-*]

.

Пример кода

Если вы посмотрите в исходный код (доступно на их сайте) https://getbootstrap.com/docs/4.2/getting-started/download/#source-files

В файле boostrap.js:1468 имеется следующий фрагмент кода:

$(document).on(Event$3.CLICK_DATA_API, Selector$3.DATA_TOGGLE, function (event) {
  // preventDefault only for <a> elements (which change the URL) not inside the collapsible element
  if (event.currentTarget.tagName === 'A') {
    event.preventDefault();
  }

  var $trigger = $(this);
  var selector = Util.getSelectorFromElement(this);
  var selectors = [].slice.call(document.querySelectorAll(selector));
  $(selectors).each(function () {
    var $target = $(this);
    var data = $target.data(DATA_KEY$3);
    var config = data ? 'toggle' : $trigger.data();

    Collapse._jQueryInterface.call($target, config);
  });
});

Это только пример, но, как вы можете видеть, событие прикрепляется к элементу документа и присоединяется к любому динамически загружаемому элементу с помощью jQuery on() http://api.jquery.com/on/