What mechanism does Bootstrap use to detect changes in the DOM?

Question

What mechanism does Bootstrap use to detect changes in the DOM?

Many Bootstrap plugins become functional simply by adding certain data-*="xzy" attributes to elements (in real-time).

For example, just include data-toggle="collapse" in an anchor tag and Bootstrap Collapse will work immediately. Check out the demo https://jsfiddle.net/4n5zrkpb/.

I am curious about:

What technology is used behind this functionality? (I heard they do not rely on mutation events or use MutationObserver.)
Can I implement it myself ;-)

UPDATE: I do not want to deal with Event binding on dynamically created elements?. Originally, my goal was to know when new elements were dynamically created! However, the Bootstrap method seems more convenient and compatible: It only notifies if there is some user interaction (such as listening to all click events).

javascript twitter-bootstrap bootstrap-4

Answer 1

Answer №1

This code snippet is essentially setting up an event listener in jQuery to respond to clicks on specific elements in the document that have a certain attribute.

It looks like this:

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

In simpler terms, this means that any click on the document triggers a reaction, but only if the click originated from an element with the data-toggle attribute set to collapse.

To clarify the question posed in the title: Wordpress does not actively monitor DOM changes because it doesn't need to. It only responds when user interactions occur.

Answer 2

This code snippet is essentially setting up an event listener in jQuery to respond to clicks on specific elements in the document that have a certain attribute.

It looks like this:

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

In simpler terms, this means that any click on the document triggers a reaction, but only if the click originated from an element with the data-toggle attribute set to collapse.

To clarify the question posed in the title: Wordpress does not actively monitor DOM changes because it doesn't need to. It only responds when user interactions occur.

Answer 3

Answer №2

A brief summary

The usage of the jQuery method .on() is demonstrated in this code snippet, allowing for attachment to elements based on the [data-*] selector.

Highlighted code snippet

For those interested in exploring further, the source code can be found on their official website at https://getbootstrap.com/docs/4.2/getting-started/download/#source-files

Within the file boostrap.js:1468, there exists the following segment 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);
  });
});

While this serves as an illustration, it effectively showcases how the event is linked to the document element and adapts to any dynamically loaded element utilizing jQuery's on() method. Learn more about http://api.jquery.com/on/

Answer 4

A brief summary

The usage of the jQuery method .on() is demonstrated in this code snippet, allowing for attachment to elements based on the [data-*] selector.

Highlighted code snippet

For those interested in exploring further, the source code can be found on their official website at https://getbootstrap.com/docs/4.2/getting-started/download/#source-files

Within the file boostrap.js:1468, there exists the following segment 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);
  });
});

While this serves as an illustration, it effectively showcases how the event is linked to the document element and adapts to any dynamically loaded element utilizing jQuery's on() method. Learn more about http://api.jquery.com/on/

What mechanism does Bootstrap use to detect changes in the DOM?

Answer №1

Answer №2

Similar questions

My local requests are being blocked by both Chrome and Firefox

The navigation bar initially fills the width of the screen, but does not adjust to match the width of the table when scrolling

Establish a predetermined selection for a radio button and its associated checkbox option

Tips for implementing JS function in Angular for a Collapsible Sidebar in your component.ts file

Hover-enabled dropdown menu in React-Bootstrap

Enhancing traditional functions with Javascript annotations or decorators

Discovering a specific element using jQuery

Tips on adding TypeScript annotations to an already existing global function

Achieve multiple returns of a function by employing .fadeOut() iteratively instead of just once

Tips for setting a select list to have no elements pre-selected when using the jQuery bsmSelect plugin

AngularJS: Enabling unidirectional binding for select option to model

Loading fonts in React Native without using Expo

What is the best way to locate all mesh faces that are being lit up by a SpotLight

Angular Commandments: Understanding the Directives

Using the `find()` method in a loop of Mongoose iterate

Problem with incorporating responsive gifs

Utilizing a Custom Validator to Compare Two Values in a Dynamic FormArray in Angular 7

Unusual Behavior Observed in JavaScript Map Reduce

The placement of all buttons must be at the bottom of every card

Using jQuery to assess the values of all visible textboxes