Question

如果（交互地）添加了一些data-*="xzy"属性，许多Bootstrap插件将立即起作用。

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

我想知道：

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

更新：我不要Event binding on dynamically created elements?。我最初想在动态创建新元素时进行更新！但是Bootstrap方式要容易得多并且向后兼容：仅在发生某些用户交互（例如监听所有点击事件）时通知。

Answer 1

基本上是观察文档上的click元素，并使用jQuery的属性选择器进行过滤。

就是这样

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

这意味着对文档的每次单击都会做出反应，但前提是click事件的源是具有data-toggle属性的元素，其值具有崩溃值。

因此在标题中回答您的问题：根本不通知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);
  });
});

这只是一个示例，但是您可以看到，事件已附加到document元素，并使用jQuery on() http://api.jquery.com/on/

附加到任何可动态加载的元素

DOM更改如何通知Bootstrap？

2 个答案: