CODEWITHSUNDEEP
slick.js
cabs
cabs

Reputation: 710

How to prevent Slick plugin from removing event listeners

This is my actual slick gallery, I added an 'click' event listener on the "?" button... but when the gallery hits the breakpoint, slick will remove all the event listeners... how can i prevent that?

$('.qmark-btn').click(function(e) {
        e.preventDefault();
        // var img = $(this);
        alert('test');
});
$('.img-gallery').slick({
        slidesToShow: 6,
        slidesToScroll: 3,
        arrows: false,
        rows: 3,
        infinite: false,

        responsive: [
            {
                breakpoint: 1200,
                settings: {
                    slidesToShow: 5,
                    slidesToScroll: 3,
                }
            },
            {
                breakpoint: 992,
                settings: {
                    slidesToShow: 4,
                    slidesToScroll: 3,
                }
            },
            {
                breakpoint: 768,
                settings: {
                    slidesToShow: 3,
                    slidesToScroll: 3,
                }
            },
            {
                breakpoint: 600,
                settings: {
                    slidesToShow: 2,
                    slidesToScroll: 1,
                }
            }

        ]
    });

enter image description here

Upvotes: 1

Views: 2252

Answers (2)

Max
Max

Reputation: 999

The problem with cloning is that it only keeps jquery related handlers and will not preserve things like vanilla js events and references to the old node that may exist in your code. To keep all of this, we want to avoid cloning the elements AND avoid using the empty() jquery function which removes all jquery handler, so one solution would be to replace this function by emptying the content with a simple use of innerHTML: 

Slick.prototype.cleanUpRows = function() {
    var _ = this, originalSlides;

    if(_.options.rows > 1) {
        originalSlides = _.$slides.children().children().clone(true);
        originalSlides.removeAttr('style');
        _.$slider.get(0).innerHTML = '';
        _.$slider.append(originalSlides);
    }

};

or use a documentFragment:

Slick.prototype.cleanUpRows = function() {

    var _ = this, originalSlides;

    if(_.options.rows > 0) {
        originalSlides = _.$slides.children().children()
        originalSlides.removeAttr('style');

        var fragment = document.createDocumentFragment();
        _.$slides.children().each(function(i, element) {
            while(element.firstChild) {
                fragment.appendChild(element.firstChild);
            }
            element.parentNode.replaceChild(fragment, element);
        })
    }

};

Upvotes: 1

Gordon
Gordon

Reputation: 71

I experienced the same problem and fixed it with a small tweak to the cleanUpRows function within slick.js.

Slick.prototype.cleanUpRows = function() {
    var _ = this, originalSlides;

    if(_.options.rows > 1) {
        originalSlides = _.$slides.children().children().clone(true);
        originalSlides.removeAttr('style');
        _.$slider.empty().append(originalSlides);
    }

};

Simply add ".clone(true)". This copies eventlisteners to originalSlides.

This fixed my issues with Slick when a responsive break was hit.

Upvotes: 7

Related Questions