Apply BS3 data attribute mappings to added child elements too. (vufin…

…d-org#4176)

Improved Bootstrap 3 compatibility layer to handle dynamically added content better by converting data attributes for child nodes of the added nodes as well.

themes/bootstrap5/js/bs3-compat.js

@@ -1,5 +1,6 @@
 /*global VuFind*/
 VuFind.register('bootstrap3CompatibilityLayer', function bootstrap3CompatibilityLayer() {
+  const data_attribute_selector = '[data-dismiss],[data-target],[data-toggle],[data-ride],[data-slide],[data-slide-to]';
 
   function initNavbar() {
     document.querySelectorAll('.navbar').forEach((el) => {
@@ -114,13 +115,14 @@ VuFind.register('bootstrap3CompatibilityLayer', function bootstrap3Compatibility
   }
 
   function initDataAttributeMappings() {
-    document.querySelectorAll('[data-dismiss],[data-target],[data-toggle],[data-ride],[data-slide],[data-slide-to]').forEach((el) => {
-      convertDataAttributes(el);
-    });
+    document.querySelectorAll(data_attribute_selector).forEach((el) => convertDataAttributes(el));
     const observer = new MutationObserver((mutations) => {
       mutations.forEach((mutation) => {
         mutation.addedNodes.forEach((el) => {
           convertDataAttributes(el);
+          if (typeof el.querySelectorAll !== 'undefined') {
+            el.querySelectorAll(data_attribute_selector).forEach((subEl) => convertDataAttributes(subEl));
+          }
         });
       });
     });