DOM 更改如何通知 Bootstrap？

Question

如果添加了一些 data-*="xzy" 属性（以交互方式），许多 Bootstrap 插件会立即工作。

例如只需将data-toggle="collapse" 添加到锚标记，Bootstrap Collapse 就会出现，请参阅演示 https://jsfiddle.net/4n5zrkpb/。

我想知道：

• 背后的技术是什么？ （据我所知，他们不听突变事件，也不使用MutationObserver。）
• 我可以自己使用吗 ;-)

---

更新：我不想要Event binding on dynamically created elements?。我原本想在动态创建新元素时更新！ 但 Bootstrap 方式更简单且向后兼容：仅在发生某些用户交互（例如侦听所有点击事件）时通知。

Answer 1

它基本上是对文档上的 click 元素的观察，由带有 jQ​​uery 的属性选择器过滤。

是这样的

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

这意味着，对文档的每次点击都会做出反应，但前提是点击事件的源是具有 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/ 的任何动态加载的元素上