How twitter bootstrap hooks up plugins through markup?

Question

When I dynamically add right html markup to the DOM bootstrap hooks up right plugin on new element. How does it do this?

If I have a markup

<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu"> <li><a tabindex="-1" href="#">Action</a></li> <li class="divider"></li> <li><a tabindex="-1" href="#">Separated link</a></li> </ul>

Bootstrap will make from it dropdown element (hooks up dropdown plugin). How does it do it? Does it do it dynamically? (if I add markup during runtime?)

could you please clarify your question?

Anup Cowkur
– Anup Cowkur

2012-10-29 07:10:03 +00:00
Commented Oct 29, 2012 at 7:10 — Anup Cowkur
– Anup Cowkur, Commented Oct 29, 2012 at 7:10

Infeligo · Accepted Answer · 2012-10-29 07:42:27Z

1

It does so by hooking to document ready event (or window load) and then either setting event listeners or initializing the components. For example, Affix plugin is being searched by its data-spy="affix" attribute. As for Typeahead plugin, it gets initialized on first focus event.

answered Oct 29, 2012 at 7:42

Infeligo

11.8k9 gold badges42 silver badges52 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

WHITECOLOR Over a year ago

Does it hook plugins dynamically on newly added markup during runtime?

Infeligo Over a year ago

In most cases it does. Bootstrap plugins delegates event listening to body element, not the targeted elements itself. This way it can always handle dynamically added controls. It effectively initializes the plugin when the user first interacts with it.

Collectives™ on Stack Overflow

How twitter bootstrap hooks up plugins through markup?

1 Answer 1

2 Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Related