JavaScript 動態加載時不觸發事件

Question

我正在使用 Swiper.js 庫，並且在通過 JavaScript 動態加載元素時觸發“slideChange”事件時遇到問題。

這是我的水平和垂直滑動器初始化的地方：

 var swiper = { initialize: function() { swiperH = new Swiper('.swiper-container-h', { slidesPerView: 1, preloadImages: false, updateOnImagesReady: true, lazy: true, }).on('slideChange', function () { console.log('Swiped Horizonally'); }); swiperV = new Swiper('.swiper-container-v', { direction: 'vertical', slidesPerView: 1, preloadImages: false, updateOnImagesReady: true, lazy: true, effect: 'fade', loop: true, fadeEffect: { crossFade: true }, pagination: { el: '.swiper-pagination-v', clickable: true, }, }).on('slideChange', function () { console.log('Swiped Vertically'); }); } };

水平的'slideChange'觸發的原因是它已經在html文件中：

 <!-- Swiper --> <div class="dash-container"> <div class="swiper-container swiper-container-h"> <div class="swiper-wrapper" id="swipeData"> </div> </div> </div>

現在，垂直幻燈片正在通過 JavaScript 加載，這就是垂直的“slideChange”不會觸發的地方。

 function loadDresses(selectedDresses) { return new Promise((resolve, reject) => { $('#swipeData').html(''); for (var i = 0; i < selectedDresses.length; i++) { var vScroll = '<div class="swiper-slide"><div class="swiper-container swiper-container-v"><div class="swiper-wrapper" style="height: 100%;">'; for (var j = 0; j < selectedDresses[i].images.length; j++) { vScroll += '<div class="swiper-slide"><img src="' + selectedDresses[i].images[j] + '"/></div>'; } vScroll += '<div class="swiper-slide" style="display:table;height:100%;width:100%;">'; vScroll += '</div></div></div><div class="swiper-pagination swiper-pagination-v">'; $('#swipeData').append(vScroll).trigger('create'); } resolve(true); }); }

錯誤發生在此代碼段：

    .on('slideChange', function () {
        console.log('Swiped Vertically');
    });

有任何想法嗎？ 謝謝！

編輯：

我嘗試了以下方法來阻止它過早初始化，但仍然沒有運氣：

          loadDresses(dresses).then(function(result) {
            var t = setInterval(() => {
                swiper.initialize();
                clearInterval(t);
            }, 5000);
        });

Answer 1

這沒有幫助嗎？

var swiper = {
    initialize : function() {
        swiperH = new Swiper('.swiper-container-h', {
            slidesPerView: 1,
            preloadImages: false,
            updateOnImagesReady: true,
            lazy: true,
        })
        .on('slideChange', function () {
            console.log('Swiped Horizonally');
        });

        swiperV = new Swiper('.swiper-container-v', {
            direction: 'vertical',
            slidesPerView: 1,
            preloadImages: false,
            updateOnImagesReady: true,
            lazy: true,
            effect: 'fade',
            loop: true,
            fadeEffect: {
                crossFade: true
            },
            pagination: {
                el: '.swiper-pagination-v',
                clickable: true,
            },
            on: {
                slideChange: function() {
                    console.log('Swiped Vertically');
                }
            }
        });
    }
};

Answer 2

您在這里有一些選擇：

為了保持應用程序的流暢，您可以銷毀 slider 並重新初始化它。

swiperH.destroy()

然后

loadDresses();
swiper.initialize();

或者

每次手動更改幻燈片時，您都可以只mySwiper.update()

Answer 3

問題是在初始化期間沒有找到帶有 class swiper-pagination-v 的元素。

您可以為 class swiper-pagination-v 存在條件。

var swiper = {
    initialize : function() {
        swiperH = new Swiper('.swiper-container-h', {
            slidesPerView: 1,
            preloadImages: false,
            updateOnImagesReady: true,
            lazy: true,
        })
            .on('slideChange', function () {
                console.log('Swiped Horizonally');
            });

        if ($('.swiper-container-v').length > 0) {
            swiperV = new Swiper('.swiper-container-v', {
                direction: 'vertical',
                slidesPerView: 1,
                preloadImages: false,
                updateOnImagesReady: true,
                lazy: true,
                effect: 'fade',
                loop: true,
                fadeEffect: {
                    crossFade: true
                },
                pagination: {
                    el: '.swiper-pagination-v',
                    clickable: true,
                },
            })
                .on('slideChange', function () {
                    console.log('Swiped Vertically');
                });
        }
    }
};