how to add event listener to dynamically created elements?

Question

I have swiper which works perfectly with existing elements. But when i scroll down my script creates dyncamically elements and my swiper are not work because at beggining it doesnt add event listiner.

var swiperContainer = document.querySelectorAll('.swiper1')
        swiperContainer.forEach(function (elem) {
            var swiper = new Swiper(elem, {
                spaceBetween: 30,
                pagination: {
                    el: elem.parentElement.querySelector('.swiper-pagination1'),
                    clickable: true,
                    dynamicBullets: true,
                },
                navigation: {
                    nextEl: elem.parentElement.querySelector('.swiper-button-next1'),
                    prevEl: elem.parentElement.querySelector('.swiper-button-prev1'),
                },
            });
        })

I tried this using jquery still didnt work. I know it works if i remove this event listener and add again after loaded more elements. Is there any way to to do it better ?

Answer 1

Your goal was to enable dynamically created HTML components to be compatible with the Swiper plugin. In order to accomplish this, Swiper elements were dynamically detected and initialized as new elements are added to the DOM using MutationObserver and event delegation. Thus, items that are created dynamically can also easily make use of Swiper capabilities.

var targetNode = document.body;

var config = { childList: true, subtree: true };

var callback = function(mutationsList, observer) {
    for(var mutation of mutationsList) {
        if (mutation.type === 'childList') {
            mutation.addedNodes.forEach(function(node) {
                if (node.classList && node.classList.contains('swiper1')) {
                    var swiper = new Swiper(node, {
                        spaceBetween: 30,
                        pagination: {
                            el: node.parentElement.querySelector('.swiper-pagination1'),
                            clickable: true,
                            dynamicBullets: true,
                        },
                        navigation: {
                            nextEl: node.parentElement.querySelector('.swiper-button-next1'),
                            prevEl: node.parentElement.querySelector('.swiper-button-prev1'),
                        },
                    });
                }
            });
        }
    }
};

var observer = new MutationObserver(callback);

observer.observe(targetNode, config);



$(document).on('click', '.swiper1', function() {
    var swiper = new Swiper(this, {
        spaceBetween: 30,
        pagination: {
            el: $(this).parent().find('.swiper-pagination1'),
            clickable: true,
            dynamicBullets: true,
        },
        navigation: {
            nextEl: $(this).parent().find('.swiper-button-next1'),
            prevEl: $(this).parent().find('.swiper-button-prev1'),
        },
    });
});