How is Bootstrap notified by DOM changes?

Question

A lot of Bootstrap plugins are immediately working if some data-*="xzy" attributes are added (interactively).

E.g. just add data-toggle="collapse" to an anchor tag and Bootstrap Collapse is present, see demo https://jsfiddle.net/4n5zrkpb/.

I want to know:

What's the technology behind? (As far as I know they don't listen to mutation events and don't use MutationObserver.)
Can I use it on my own ;-)

UPDATE: I don't want Event binding on dynamically created elements?. I originally wanted to be updated when new elements has been created dynamically! But the Bootstrap way is far more easy and backward compatible: Notify only if some user interaction (e.g listen to all click events) took place.

Look at [this](https://stackoverflow.com/questions/203198/event-binding-on-dynamically-created-elements#answer-27373951) answer. The basic idea is to listen to all clicks on `document` and then look what was the `target` element. — Dmitry, Jan 16 '19 at 12:59
@Isma Do you know the event name where `$(document).on(?)` is called? — Marcel, Jan 16 '19 at 12:59
Possible duplicate of [Event binding on dynamically created elements?](https://stackoverflow.com/questions/203198/event-binding-on-dynamically-created-elements) — Dmitry, Jan 16 '19 at 13:02
@Marcel, I think is on('click'... Look at this question: https://stackoverflow.com/questions/12805825/can-you-specify-a-data-target-for-bootstrap-which-refers-to-a-sibling-dom-elem#12809794 — Isma, Jan 16 '19 at 13:03

yunzen · Accepted Answer · 2019-01-16T13:08:54.583

3

It's basically an observing of a click element on the document, filtered by an attribute selector with jQuery.

It's like this

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

That means, every click on the document is reacted upon, but only if the source of the click event was an element with the attribute of data-toggle with a value of collapse.

So to answer your question in the title: Wordpress is not notified of DOM changes at all. Because it doesn't need to. It only reacts, if the user interacts.

edited Jan 16 '19 at 13:08

answered Jan 16 '19 at 13:03

yunzen

30,001
10
64
93

Thanks, alot. The answer of @VladNeacsu is quite good. But your answer fits my needs best! – Marcel Jan 16 '19 at 13:54

score 2 · Answer 2 · edited Jan 16 '19 at 13:06

TL;DR

It uses the jQuery .on() function to attach to any element based on the [data-*] selector

Code sample

If you look into the source code (available on their website) https://getbootstrap.com/docs/4.2/getting-started/download/#source-files

In the boostrap.js:1468 file you have the following chunk of code:

$(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);
  });
});

This is only an example, but as you can see the event is attached to the document element and attaches to any dinamically loaded element using jQuery on() http://api.jquery.com/on/

Exactly. [Here](https://github.com/twbs/bootstrap/blob/v4-dev/js/src/collapse.js#L56) the OP can see that the selector is for elements with `[data-toggle="collapse"]` attribute and [here](https://github.com/twbs/bootstrap/blob/v4-dev/js/src/collapse.js#L371) is where bootstrap bind that selector to the elements - It's just a matter of looking at the source code on github — Alon Eitan, Jan 16 '19 at 12:56
@AlonEitan Sorry, I did look into the source but didn't find the right line. (At that moment not know to look for click events.) — Marcel, Jan 16 '19 at 14:09

How is Bootstrap notified by DOM changes?

2 Answers2