当导航为真时，owl-item 上的点击事件不会在 owl 轮播 1.3.3 中触发

Question

任何人都可以在 owl-carousel 上帮助我。 owl 旋转木马 v1.3.3 中导航打开时未触发项目上的单击事件。我的代码是：

$(document).ready(function () {
        $('.owl-carousel').owlCarousel({
          items: 3,
          mouseDraggable: false,
          navigation: true,
          scrollPerPage: true,
          rewindNav: false,
          pagination: false,
          navigationText: ['<span>&#60;</span>', '<span>&#62;</span>'],
        })
        $('.owl-carousel').on('click', '.owl-item>div', function () {
          alert('click');
        })
      })

Answer 1

$(document).ready(function() {
  var owl = $('.owl-carousel');
  owl.owlCarousel({
    margin: 10,
    navigation: true,
    loop: true,
  })
  $('.owl-carousel').on('click', '.owl-item>div', function () {
          alert('click');
  })
})

.owl-carousel .item {
    height: 10rem;
    background: #4DC7A0;
    padding: 1rem;
    margin: 1rem;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.3/owl.theme.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.3/owl.carousel.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.3/owl.carousel.min.js"></script>



<div class="owl-carousel owl-theme">
  <div class="item">
    <h4>1</h4>
  </div>
  <div class="item">
    <h4>2</h4>
  </div>
  <div class="item">
    <h4>3</h4>
  </div>
  <div class="item">
    <h4>4</h4>
  </div>
  <div class="item">
    <h4>5</h4>
  </div>
  <div class="item">
    <h4>6</h4>
  </div>
  <div class="item">
    <h4>7</h4>
  </div>
  <div class="item">
    <h4>8</h4>
  </div>
  <div class="item">
    <h4>9</h4>
  </div>
  <div class="item">
    <h4>10</h4>
  </div>
  <div class="item">
    <h4>11</h4>
  </div>
  <div class="item">
    <h4>12</h4>
  </div>
</div>

~~很有可能 owl carousel 停止了父元素（'.owl-carousel'）的事件传播。~~

~~因此，与其在 '.owl-carousel' 上添加点击事件并到达其子项，不如直接在子项 '.owl-item>div' 上添加。~~

更新： 试试这个，确保在加载文档后设置事件侦听器。这为您的 HTML 渲染提供了足够的时间。

当导航为真时，owl-item 上的点击事件不会在 owl 轮播 1.3.3 中触发

Click event on owl-item not triggered in owl carousel 1.3.3 when navigation is true

javascript

carousel

owl-carousel