I am using Boostrap 5 and this Lightbox library https://trvswgnr.github.io/bs5-lightbox/
It works fine on pages loaded normally but it will not load on AJAX loaded content.
I have tried this code to make it work with AJAX but it did not work.
$(document).on('click', '[data-toggle="lightbox"]', function(event) {
event.preventDefault();
$(this).Lightbox();
});
It returned this error:
Uncaught TypeError: $(...).Lightbox is not a function
If you're using the vanilla JS version, the script only adds event handlers to elements with the data-toggle="lightbox" attribute that are present when the script loads, hence new elements loaded via AJAX calls not working.
If you're able to use Node (or hack around not using node with a module loader like RequireJS), you can instantiate a new Lightbox when each new element loads, per the docs:
$(document).on('click', '[data-toggle="foo"]', function (event) {
event.preventDefault();
const el = $(this);
const lightbox = new Lightbox(el);
lightbox.show();
});
Note that the correct syntax here is to create a new lightbox from the element and then use lightbox.show()... $(this).Lightbox() will never work.