Owl carousel 2 cloned item click events not firing

Question

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.

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.

JSFiddle

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:

//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?

score 4 · Accepted Answer · edited Oct 05 '15 at 18:46

4

Solution to this from Owl Carousel GitHub page:

https://github.com/smashingboxes/OwlCarousel2/issues/962

$('#multiple-carousel').on('click', '.item', function () {
    alert("click");
});

edited Oct 05 '15 at 18:46

Pikamander2

7,332
3
48
69

answered Aug 03 '15 at 08:37

ui-matt

394
2
5
15

score 1 · Answer 2 · answered Dec 24 '17 at 01:28

1

Binding the 'click' event to a carousel item's child instead of the item itself solved it for me.

<div class="owl-carousel">
    <div class="owl-item">
        <div onclick="alert(1)"></div>
    </div>
    ...

answered Dec 24 '17 at 01:28

cafrie

11
3

score -3 · Answer 3 · answered Jul 24 '20 at 15:35

-3

Owl 2 carousel clone item does not fire hover event. I want to play video on item hover. Clone item do not play video on hover

answered Jul 24 '20 at 15:35

Khawaja M. Zain Sehgal

1

This answer does not make any sense. My best guess is that you are trying to ask a question. If this is the case, I would suggest deleting this answer and opening a new question. When you do this, please include any relevant code or explanation of what you have already tried that did not work. Welcome to StackOverflow. – Doug Watkins Jul 24 '20 at 17:12

Owl carousel 2 cloned item click events not firing

3 Answers3

Linked