猫头鹰旋转木马2克隆项目点击事件没有开火 [英] Owl carousel 2 cloned item click events not firing
本文介绍了猫头鹰旋转木马2克隆项目点击事件没有开火的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我目前正在开发中使用Owl Carousel 2.0.0-beta.2.4来保持旋转木马居中并循环使用效果很好的物品。
I'm currently using Owl Carousel 2.0.0-beta.2.4 in development to keep the carousel centered and loop the items which works nicely.
出于某种原因设置循环时，Owl生成的克隆项目：似乎在点击时不会触发。您将在下面的示例中看到，每个其他项目在触发时都会发出警告，但如果项目已被克隆，则它似乎没有注册click事件。
For some reason the cloned items that Owl generates when setting loop: true doesn't seem to fire on click. You will see in the example I've put together below that every other item alerts the click when fired but if the item has been cloned it doesn't seem to register the click event.
HTML：
<div id="multiple-carousel" class="carousel-style owl-carousel">
<div class="item">
<img src="http://placehold.it/120x180">
</div>
<div class="item">
<img src="http://placehold.it/270x180">
</div>
<div class="item">
<img src="http://placehold.it/269x180">
</div>
<div class="item">
<img src="http://placehold.it/270x180">
</div>
<div class="item">
<img src="http://placehold.it/120x180">
</div>
<div class="item">
<img src="http://placehold.it/269x180">
</div>
<div class="item">
<img src="http://placehold.it/120x180">
</div>
<div class="item">
<img src="http://placehold.it/270x180">
</div>
<div class="item">
<img src="http://placehold.it/269x180">
</div>
</div>
CSS：
/*
* Owl Carousel - Animate Plugin
*/
.owl-carousel .animated {
-webkit-animation-duration: 1000ms;
animation-duration: 1000ms;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
}
.owl-carousel .owl-animated-in {
z-index: 0;
}
.owl-carousel .owl-animated-out {
z-index: 1;
}
.owl-carousel .fadeOut {
-webkit-animation-name: fadeOut;
animation-name: fadeOut;
}
@-webkit-keyframes fadeOut {
0% {
opacity: 1;
}
100% {
opacity: 0;
}
}
@keyframes fadeOut {
0% {
opacity: 1;
}
100% {
opacity: 0;
}
}
/*
* Owl Carousel - Auto Height Plugin
*/
.owl-height {
-webkit-transition: height 500ms ease-in-out;
-moz-transition: height 500ms ease-in-out;
-ms-transition: height 500ms ease-in-out;
-o-transition: height 500ms ease-in-out;
transition: height 500ms ease-in-out;
}
/*
* Core Owl Carousel CSS File
*/
.owl-carousel {
display: none;
width: 100%;
-webkit-tap-highlight-color: transparent;
/* position relative and z-index fix webkit rendering fonts issue */
position: relative;
z-index: 1;
}
.owl-carousel .owl-stage {
position: relative;
-ms-touch-action: pan-Y;
}
.owl-carousel .owl-stage:after {
content: ".";
display: block;
clear: both;
visibility: hidden;
line-height: 0;
height: 0;
}
.owl-carousel .owl-stage-outer {
position: relative;
overflow: hidden;
/* fix for flashing background */
-webkit-transform: translate3d(0px, 0px, 0px);
}
.owl-carousel .owl-controls .owl-nav .owl-prev,
.owl-carousel .owl-controls .owl-nav .owl-next,
.owl-carousel .owl-controls .owl-dot {
cursor: pointer;
cursor: hand;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.owl-carousel.owl-loaded {
display: block;
}
.owl-carousel.owl-loading {
opacity: 0;
display: block;
}
.owl-carousel.owl-hidden {
opacity: 0;
}
.owl-carousel .owl-refresh .owl-item {
display: none;
}
.owl-carousel .owl-item {
position: relative;
min-height: 1px;
float: left;
-webkit-backface-visibility: hidden;
-webkit-tap-highlight-color: transparent;
-webkit-touch-callout: none;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.owl-carousel .owl-item img {
display: block;
width: 100%;
-webkit-transform-style: preserve-3d;
}
.owl-carousel.owl-text-select-on .owl-item {
-webkit-user-select: auto;
-moz-user-select: auto;
-ms-user-select: auto;
user-select: auto;
}
.owl-carousel .owl-grab {
cursor: move;
cursor: -webkit-grab;
cursor: -o-grab;
cursor: -ms-grab;
cursor: grab;
}
.owl-carousel.owl-rtl {
direction: rtl;
}
.owl-carousel.owl-rtl .owl-item {
float: right;
}
/* No Js */
.no-js .owl-carousel {
display: block;
}
/*
* Owl Carousel - Lazy Load Plugin
*/
.owl-carousel .owl-item .owl-lazy {
opacity: 0;
-webkit-transition: opacity 400ms ease;
-moz-transition: opacity 400ms ease;
-ms-transition: opacity 400ms ease;
-o-transition: opacity 400ms ease;
transition: opacity 400ms ease;
}
.owl-carousel .owl-item img {
transform-style: preserve-3d;
}
/*
* Owl Carousel - Video Plugin
*/
.owl-carousel .owl-video-wrapper {
position: relative;
height: 100%;
background: #000;
}
.owl-carousel .owl-video-play-icon {
position: absolute;
height: 80px;
width: 80px;
left: 50%;
top: 50%;
margin-left: -40px;
margin-top: -40px;
background: url("owl.video.play.png") no-repeat;
cursor: pointer;
z-index: 1;
-webkit-backface-visibility: hidden;
-webkit-transition: scale 100ms ease;
-moz-transition: scale 100ms ease;
-ms-transition: scale 100ms ease;
-o-transition: scale 100ms ease;
transition: scale 100ms ease;
}
.owl-carousel .owl-video-play-icon:hover {
-webkit-transition: scale(1.3, 1.3);
-moz-transition: scale(1.3, 1.3);
-ms-transition: scale(1.3, 1.3);
-o-transition: scale(1.3, 1.3);
transition: scale(1.3, 1.3);
}
.owl-carousel .owl-video-playing .owl-video-tn,
.owl-carousel .owl-video-playing .owl-video-play-icon {
display: none;
}
.owl-carousel .owl-video-tn {
opacity: 0;
height: 100%;
background-position: center center;
background-repeat: no-repeat;
-webkit-background-size: contain;
-moz-background-size: contain;
-o-background-size: contain;
background-size: contain;
-webkit-transition: opacity 400ms ease;
-moz-transition: opacity 400ms ease;
-ms-transition: opacity 400ms ease;
-o-transition: opacity 400ms ease;
transition: opacity 400ms ease;
}
.owl-carousel .owl-video-frame {
position: relative;
z-index: 1;
}
JavaScript：
JavaScript:
//Owl carousel 2 plugin here
*trimmed due to length*
//My script here
$('#multiple-carousel').owlCarousel({
center: true,
items: 3,
autoWidth: true,
loop: true,
margin: 20,
mouseDrag: false,
responsiveRefreshRate: 0,
nav: true
});
$('#multiple-carousel .item').click(function () {
alert("click");
});
这对我的生活有所了解，有什么建议吗？
This is bugging the life out of me, any suggestions?
推荐答案
从Owl Carousel GitHub页面解决这个问题：
Solution to this from Owl Carousel GitHub page:
https://github.com/smashingboxes/OwlCarousel2/issues/962
$('#multiple-carousel').on('click', '.item', function () {
alert("click");
});
这篇关于猫头鹰旋转木马2克隆项目点击事件没有开火的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
