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

[undestroyer]

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?

[tomaszpoliszuk]

please, jsfiddle

[undestroyer]

codepen (as like as jsfiddle) examle (http://codepen.io/anon/pen/jEYymW) crashes on my iPad mini iOS7.1.2 in both browsers (Chrome and Safari) after first scrolling (and I have no idea why it happens)
You can check live demo at http://vvtur.ru . Try tap green buttons in slider items, it should show you modal form. On desktop it is OK, but on mobile it fails

[undestroyer]

Ok, little investigation helped me to get some info. Problem is in responsive property. I get this bug when mobileFirst:false and number of visible elements differs from the number in responsive.settings.slidesToShow property. Unsetting responsive property makes thing work good, but it provides design problems.

Some new info. Reiniting of slick brakes system. Try to init slick, unslick it and again init. In my project it leeds to get bug. Look at http://codepen.io/anon/pen/PwQbga We have to define .on('click',function(){}) after reiniting slick, othervise (like it is in the example) .on('click',function(){}) doesn't work

UPD: Ok, I Have a hotfix (bad fix).

function setButtonsActions() {
        $(".button").on('click',function(){
            //what to do on click
        });
    };

var SLICKconfig = {
        infinite: true,
        slidesToScroll: 1,
        autoplay: true,
        mobileFirst:false,
        autoplaySpeed: 5000,
    };

function getSlidesToShow() {
    var width = $(window).width();
    if (width >= 1200) {
        return 3;
    } else if (width >= 768) {
        return 2;
    } else {
        return 1;
    }
}

SLICKconfig.slidesToShow = getSlidesToShow();

$(".carousel-container").slick(SLICKconfig);

setButtonsActions();

$(window).resize(function () {
    $(".carousel-container").slick("unslick");
    SLICKconfig.slidesToShow = getSlidesToShow();
    $(".carousel-container").slick(SLICKconfig);
    setButtonsActions();
});

[tomaszpoliszuk]

@undestroyer - sorry i'm too sick right now to analyse this problem, but i'm also experiencing some problems with responsive options (didn't have time to check it also) - you could try 1.3.15 if it works, unless you need some options from 1.4.
P.S. by jsfiddle i mean any code playground (like "google that" === "check in search engine" or very old "walkman" === "cassette player [not necessary made by sony]").

[desandro]

You might want to try Flickity. Flickity has a custom staticClick event to resolve this tricky situation detecting clicks/taps within carousels. Try the demo: http://codepen.io/desandro/pen/XJZgzM

[neverthemachineforever]

:+1: I am having a similar issue with not being able to click anchors within a slide if the responsive property is set, in fact no events on anchors seem to fire. I'll try and confirm @undestroyer's fix, or otherwise force it to work somehow and post back.

[neverthemachineforever]

Yup, can confirm that @undestroyer's fix works as long as the event handlers are registered after slick is (re)initialised, but it's obviously not ideal to re-slick every resize.

[neverthemachineforever]

It seems that Slick calls init() after the resize event calls checkResponsive() which removes all event handlers on the slides, probably somewhere around here: https://github.com/kenwheeler/slick/blob/1.4.1/slick/slick.js#L709

My current solution is to listen for the init event and rebind any event handlers (Marionette in this case):

this.$childViewContainer.on('init', function() {
  console.log('delegating child events');
  self.children.each(function(child) {
    child.delegateEvents();
  });
});

I needed to listen to this event before initialising Slick, as the event may be fired during initialisation (reseting the handlers).

[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
});

[neverthemachineforever]

Also a good solution @mikerogerz

I had some issues with infinite looping of the slider as the "cloned" slides don't retain the events, so ended up setting data- attributes on the slide anchors so I could detect which one had been clicked.

@tomaszpoliszuk, @kenwheeler I would suggest these valid workarounds are probably enough to close this issue.

[mufaddalmw]

@mikerogerz Thanks for the solution.

[klihelp]

For mikerogerz's solution need some additional thinking if you add anchors dynamically.
$('.carousel-container').on(..) vs $(document)

[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
})