JavaScript не вызывает события при динамической загрузке - PullRequest
Новая
       15

JavaScript не вызывает события при динамической загрузке

0 голосов
/ 23 октября 2019

Я использую библиотеку Swiper.js, и у меня есть проблема с получением события 'slideChange' для запуска при динамической загрузке элементов через JavaScript.

Вот где инициализируются мои свиперы как горизонтальные, так и вертикальные:

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

With this error

Есть идеи? Спасибо!

Редактировать:

Я попробовал следующее, чтобы остановить инициализацию слишком рано, но все же не повезло: 

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

Ответы [ 3 ]

1 голос
/ 23 октября 2019

А это не помогает? 

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');
                }
            }
        });
    }
};
0 голосов
/ 23 октября 2019

Проблема в том, что элемент с классом swiper-pagination-v не найден во время инициализации.

Вы можете задать условие для класса 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');
                });
        }
    }
};
0 голосов
/ 23 октября 2019

У вас есть несколько вариантов здесь:

Чтобы сохранить поток вашего приложения, вы можете уничтожить слайдер и повторно инициализировать его. 

swiperH.destroy()

затем 

loadDresses();
swiper.initialize();

ИЛИ

вы можете просто mySwiper.update() каждый раз, когда вы меняете слайд вручную

...