javascript - 动态加载时 JavaScript 不会触发事件
问题描述
我正在使用 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);
});
解决方案
这没有帮助吗?
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');
}
}
});
}
};
推荐阅读
- javascript - 如何在 v-html 中设置标签的子组件样式
- python - 为什么我的 check_if_tie() 函数在井字游戏中不起作用?
- node.js - Paypal API 调用产生 415 状态
- python - 关闭 Z3py 打印截断
- java - 插入休眠模型映射器空值
- rust - 如何将 #[must_use] 应用于异步函数?
- javascript -
- html - CSS在悬停时显示错误的颜色
- arrays - Typescript:为数组类型扩展 IterableIterator 但返回一个简单类型
- c++ - 如何在 C++ 中创建对的优先级队列。弹出具有最小值的元素。默认弹出最大