Click (touch) inside items doesn't work on iOS

Hi. I’m trying to use Slick to display offers. Every offer has a button, that can be clicked (touched). If property mobileFirst set to false - on desktop everything works fine, but on iOS 7 Safari and Chrome jQuery $('hot-tour-button').on('click' function(){...}) doesn’t work. If property mobileFirst set to true - iOS starts work with click event, but desktop borwsers don’t catch this.

$(document).ready(function() { 
    var SLICKconfig = {
        infinite: true,
        slidesToShow: 3,
        slidesToScroll: 1,
        autoplay: true,
        mobileFirst:false,
        autoplaySpeed: 5000,
        prevArrow:"<div class='visible-lg vv-slick-prev'><img src='/img/arrow.png'></div>",
        nextArrow:"<div class='visible-lg vv-slick-next'><img src='/img/arrow.png' class='rotate'></div>",
        responsive: [
            {
              breakpoint: 1200,
              settings: {
                slidesToShow: 3,
                slidesToScroll: 1,
              }
            },
            {
              breakpoint: 1024,
              settings: {
                slidesToShow: 2,
                slidesToScroll: 1
              }
            },
            {
              breakpoint: 768,
              settings: {
                slidesToShow: 1,
                slidesToScroll: 1
              }
            }
        ],
    };
    $(".carousel-contaner").slick(SLICKconfig);
});

$(".hot-tour-button").on('click',function(){
        toggleShadow();
    });

How should I configure Slick to make click work both, on desktop and mobile devices?

[mikerogerz]

My solution was to use event delegation (jquery’s “.on()” method) from outside of the carousel’s top element (with the “slick-slider” class), targeting the elements inside the carousel. This way the event handler is unaffected by the bug.

Example:

$('.carousel-container').on('click', 'div.button', function() {
  // do stuff
});

[Jakobud]

@mikerogerz solution works perfectly. In my experience it doesn’t even appear that I need to bind this to an extra outside container element. I just use this and it works perfectly:

$('.slick-slider').on('click', '.slick-slide', function(){
  // This click event will not trigger when you drag the carousel
})