Bootstrap 5 data-bs-toggle attributes no longer initialize components added to the DOM after page load
0 reputation · 12 Jun 2021, 12:47 UTC
0 reputation · 12 Jun 2021, 12:47 UTC
After migrating a project from Bootstrap 4 to Bootstrap 5 (assume 5.3.x), markup was updated from data-toggle/data-target to the namespaced data-bs-toggle/data-bs-target attributes. Components present in the initial HTML work as expected. The unresolved part is content injected into the DOM later, for example modal triggers or dropdowns rendered after an asynchronous fetch or by a client-side template.
Bootstrap 5 removed the jQuery dependency, so plugins are now vanilla JavaScript classes. The data-api appears to scan the document once around DOMContentLoaded. Elements added afterward carry valid data-bs-* attributes but do not respond to interaction, and the documentation does not define an official re-scan or delegated re-initialization contract for late-inserted markup.
It is unclear whether the intended pattern is to call each plugin's constructor (for example new bootstrap.Modal(element)) on every dynamically added node, whether some plugins use event delegation that should already cover late DOM insertions, or whether behavior differs across 5.0–5.3 minor releases.
A thoughtful contribution can make all the difference. Be the first to share one.
Use comments to ask for clarification. Post a solution as an answer.
No question comments on this page.