How to fix Slick Slider (Slick.JS) if it breaks on click event within the div?

问题

I added Slick slider for any device under 1024px, however every time a button within the div is clicked and the page is refreshed, the slider is gone and it leaves a mess. It fixes itself if I change the device width from the console. I tried adding a function to reinitialize it every time a button is clicked, but for some reason 'reInit' does not work. I can't provide Jsfiddle, if someone could help based on my description, I would appreciate it.

function slickify(){
    event.preventDefault();
    $('.cart-list').not('.slick-initialized').slick({
        infinite: false,
        responsive: [
            {
                breakpoint: 1024,
                autoplay: false,
                dots: true,
                infinite: false,
                settings: {
                    slidesToShow: 3,
                    slidesToScroll: 3,
                    dots: true
                }
            },
            {
                breakpoint: 786,
                autoplay: false,
                dots: true,
                infinite: false,
                settings: {
                    slidesToShow: 1,
                    slidesToScroll: 1,
                    dots: true
                }
            },
            {
                breakpoint: 550,
                autoplay: false,
                dots: true,
                infinite: false,
                settings: {
                    slidesToShow: 1,
                    slidesToScroll: 1,
                    dots: true
                }
            }
        ]
    });
}

$(window).resize(function(){
    event.preventDefault();
    var $windowWidth = $(window).width();
    if ($windowWidth < 1024) {
        slickify();  

        $(window).resize(function() {
            $('.cart-list').slick('resize');
            event.preventDefault();
          });

          $(window).on('orientationchange', function() {
            $('.cart-list').slick('resize');
            event.preventDefault();
          });
    }
});

$('.cart-list').on('click', function() {
    $('.cart-list').slick('reInit');
});

});

I've tried adding a simple function such as :

('body').on('click', function() { ('.slick-slider-div').slick('reInit'); });

where reInit is reinitialization as per Slick.JS documentation. However, it breaks any click event on the page. I also tried to make the click event only withing the div, still no result. The '.slick-initialized' class just disappears on click event.

来源：https://stackoverflow.com/questions/54463023/how-to-fix-slick-slider-slick-js-if-it-breaks-on-click-event-within-the-div