当导航为true时，点击owl carousel 1.3.3中未触发的owl项目上的事件

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的呈现提供了足够的时间。