[英]JavaScript not triggering events when dynamically loaded
I'm using the Swiper.js library and I have an issue getting the 'slideChange' event to trigger when dynamically loading elements through JavaScript.我正在使用 Swiper.js 库,并且在通过 JavaScript 动态加载元素时触发“slideChange”事件时遇到问题。
Here is where my swipers both horizontal and vertical are initialised:这是我的水平和垂直滑动器初始化的地方:
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'); }); } };
The reason why the horizontal's 'slideChange' triggers is because its already in the html file:水平的'slideChange'触发的原因是它已经在html文件中:
<!-- Swiper --> <div class="dash-container"> <div class="swiper-container swiper-container-h"> <div class="swiper-wrapper" id="swipeData"> </div> </div> </div>
Now, the vertical slides are loading through JavaScript and that's where the vertical's 'slideChange' doesn't trigger.现在,垂直幻灯片正在通过 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); }); }
The error occurs at this snippet:错误发生在此代码段:
.on('slideChange', function () {
console.log('Swiped Vertically');
});
Any ideas?有任何想法吗? Thanks!谢谢!
Edit:编辑:
I have tried the following to stop it from initialising too early, but still no luck:我尝试了以下方法来阻止它过早初始化,但仍然没有运气:
loadDresses(dresses).then(function(result) {
var t = setInterval(() => {
swiper.initialize();
clearInterval(t);
}, 5000);
});
And doesn't that help?这没有帮助吗?
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');
}
}
});
}
};
You have some options here:您在这里有一些选择:
To keep the flow of your application, you can destroy the slider and reinitialize it.为了保持应用程序的流畅,您可以销毁 slider 并重新初始化它。
swiperH.destroy()
then然后
loadDresses();
swiper.initialize();
OR或者
you can just mySwiper.update()
every time you change your slide manually每次手动更改幻灯片时,您都可以只mySwiper.update()
The problem is that an element with class swiper-pagination-v is not found during initialization.问题是在初始化期间没有找到带有 class swiper-pagination-v 的元素。
You can make condition for class swiper-pagination-v exists.您可以为 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');
});
}
}
};
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.