Owlcarousel2: Owl carousel 2 cloned item click events not firing

Created on 31 Jul 2015 · 5Comments · Source: OwlCarousel2/OwlCarousel2

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.

https://jsfiddle.net/5fyhtm51/

Source

ui-matt

Most helpful comment

Hi, @ui-matt

You could still use event delegation to make all your clicks work fine with some kind of micro-optimization by reducing memory for every click handler that you attach in your example.

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

There is a little time gap in your example, when new items are not cloned yet, but your click handler is already applied to existing items. That's another reason to use event delegation.

dashukin on 3 Aug 2015

👍3

All 5 comments

Hi, @ui-matt

You could still use event delegation to make all your clicks work fine with some kind of micro-optimization by reducing memory for every click handler that you attach in your example.

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

There is a little time gap in your example, when new items are not cloned yet, but your click handler is already applied to existing items. That's another reason to use event delegation.

dashukin on 3 Aug 2015

👍3

Ah nice!

Seems to work a treat, thanks for that @dashukin

ui-matt on 3 Aug 2015

Is there way to get item index for the clicked item? I woud like to know which item is clicked.