如何为动态创建的元素添加事件监听器？

Question

我有一个可以与现有元素完美配合的滑动器。但是，当我向下滚动时，我的脚本会创建动态元素，并且我的滑动器无法工作，因为在开始时它不会添加事件监听器。

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'),
                },
            });
        })

我尝试使用 jquery 仍然不起作用。我知道如果我删除此事件侦听器并在加载更多元素后再次添加，它会起作用。有什么办法可以做得更好吗？

Answer 1

您的目标是使动态创建的 HTML 组件能够与 Swiper 插件兼容。为了实现这一点，当使用 MutationObserver 和事件委托将新元素添加到 DOM 时，会动态检测和初始化 Swiper 元素。因此，动态创建的项目也可以轻松利用 Swiper 功能。

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'),
        },
    });
});