Javascript 如何在模式循环开关中启用事件？

我有一些关于swiper的问题，这是代码

HTML:

JS:

第一次渲染时，我单击“幻灯片”，它将正常工作并显示警报：

但当我滚动到下一张幻灯片时。它不工作吗？ 如何让所有幻灯片都工作

我在（'click'）上编辑与jquery API相关的代码（而不是Swiper API）。 一般来说，最好使用

swiper API

事件来处理单击（更模块化+更干净的代码+获取

this

一些属性，如

this.clickedSlide

）

单击事件-当用户单击/轻触开关时，将触发事件。将“touchend”事件作为参数接收

相关的：

解决方案 通过jquery-仅更改顺序（在swiper初始化后添加click事件）。解决这个错误

html，
身体{
位置：相对位置；
身高：100%；
背景：#eee；
}
.swiper容器{
宽度：100%；
身高：100%；
}
.滑梯{
文本对齐：居中；
字号：18px；
背景：#fff；
/*将幻灯片文本垂直居中*/
显示：-网络工具包盒；
显示：-ms flexbox；
显示：-webkit flex；
显示器：flex；
证明内容：中心；
对齐项目：居中；
}

幻灯片1
幻灯片2
幻灯片3
幻灯片4
$（文档）.ready（函数（）{
/*准备就绪*/
var mySwiper=new Swiper（“.Swiper container”{
//可选参数
方向：'水平'，
幻灯片视图：2，
幻灯片组：2，
循环：对，
空间期:30,，
//visibilityFullFit:正确，
//如果我们需要分页
分页：{
el:“.swiper分页”，
可点击：正确，
},
//导航箭头
导航：{
nextEl:“.swiper按钮下一步”，
prevEl:“.swiper按钮prev”，
}
})
});
$（“.swiper幻灯片”）。在（'click'，函数（e）{
e、 预防默认值（）；
警报（“点击”）；
});

您的示例中不存在此问题。请重新检查。

<div class="swiper-container">
    <div class="swiper-wrapper">
        <div class="swiper-slide">Slide 1</div>
        <div class="swiper-slide">Slide 2</div>

    </div>
    <!-- If we need pagination -->
    <div class="swiper-pagination"></div>

    <!-- If we need navigation buttons -->
    <div class="swiper-button-prev"></div>
    <div class="swiper-button-next"></div>
</div>

.swiper-slide {
    height: 300px;
    border: 1px dotted #aaa;
}

.swiper-container {
    width:900px;
}

$('.swiper-slide').on('click',function(e)
                     {
    e.preventDefault();
    alert("HIHI");
});
$(document).ready(function() {
    var mySwiper = new Swiper ('.swiper-container', {
      // Optional parameters
      direction: 'horizontal',
      slidesPerView: 2,
      slidesPerGroup: 2,
      loop:true,
      spaceBetween: 30,
      //visibilityFullFit: true,
      pagination: '.swiper-pagination',
      paginationClickable: true,
      nextButton: '.swiper-button-next',
      prevButton: '.swiper-button-prev',
    })

});

  swiper.on("click", function() {
    /* do something */
      alert("click on:" + this.clickedSlide.textContent);
  });