Slick Slider断点触发后onclick点击事件失效如何解决？

你遇到的这个情况其实是Slick Slider的常见特性：当屏幕尺寸触发响应式断点时，Slick会销毁当前的滑块DOM结构，重新生成符合新断点配置的滑块元素。而你最初的点击事件是直接绑定在初始化时的.my-gallery-image元素上的，新生成的元素并没有被绑定事件，所以点击就失效了。

下面给你两种实用的解决方法：

方法一：使用事件委托（推荐） #

事件委托是处理这类动态DOM元素事件的最佳实践——把事件绑定到不会被Slick销毁的父元素上，利用事件冒泡机制来监听子元素的点击。这样不管滑块怎么重建，新生成的.my-gallery-image元素的点击事件都能被捕获到。

替换你原来的点击事件代码为：

$('.my-gallery').on('click', '.my-gallery-image', function() {
  $(this).addClass('active');
});

这里我们把事件绑定在.my-gallery（滑块的根容器，不会被销毁重建）上，指定只处理.my-gallery-image子元素的点击事件，完美规避DOM重建导致的事件丢失问题。

方法二：利用Slick的断点回调重新绑定事件 #

如果你需要在断点切换时做一些额外操作，也可以借助Slick提供的breakpoint回调函数，在每次断点触发后重新为滑块元素绑定点击事件。

修改你的Slick初始化代码如下：

// 封装绑定点击事件的函数
function bindGalleryClick() {
  // 先解绑原有事件，避免重复绑定导致多次触发
  $('.my-gallery-image').off('click').on('click', function() {
    $(this).addClass('active');
  });
}

$('.my-gallery').slick({
  slidesToShow: 4,
  slidesToScroll: 1,
  dots: true,
  arrows: true,
  responsive: [
    {
      breakpoint: 993,
      settings: {
        slidesToShow: 2,
      },
      // 当触发993px断点时执行
      breakpoint: function() {
        bindGalleryClick();
      }
    },
    {
      breakpoint: 601,
      settings: {
        slidesToShow: 1,
      },
      // 当触发601px断点时执行
      breakpoint: function() {
        bindGalleryClick();
      }
    }
  ]
});

// 页面初始化时先绑定一次事件
bindGalleryClick();

这个方法的核心是在每次断点切换后，重新为新生成的.my-gallery-image元素绑定点击事件，同时用off('click')清除之前可能存在的绑定，防止多次点击触发多次回调。

内容的提问来源于stack exchange，提问作者Brisk