当导航为真时，在 owl carousel 1.3.3 中未触发 owl-item 上的单击事件

Question

任何人都可以在猫头鹰旋转木马上帮助我。 导航打开时，在 owl carousel 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 呈现提供了足够的时间。