How to use Lightbox on AJAX loaded content

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.