浏览器调整大小后点击事件不会触发

Question

我目前正在使用slick ，一个轮播。 当浏览器的大小调整到低于某个阈值时，我将轮播设置为不unslick （意味着它不再是轮播，并且每个轮播面板都静态显示在另一个之上）。 设置是这样的：

responsive:[{
  breakpoint: 992,
  settings: "unslick"
}]

它工作得很好。 但是，我还有一个.click函数，当单击轮播中的元素时会调用该函数。 就像是：

$(document).ready(function(){
  $('#linkInCarousel').click(function(){
    console.log('success');
  });
}

.click函数在页面的初始加载时起作用，但如果页面被调整大小，则不再起作用。 有任何想法吗？

Answer 1

该插件可能正在替换 HTML，这导致它丢失分配给这些 DOM 元素的事件处理程序。 相反，尝试将事件委托给文档，如下所示：

$(document).ready(function(){
  $(document).on('click', '#linkInCarousel', function(){
    console.log('success');
  });
};

这样做是让文档（永远不会被删除）处理事件并检查事件的实际目标是否与选择器匹配，在本例中为“#linkInCarousel”。 这样，即使在页面加载后添加元素，处理程序也会正确触发。

通常，在处理元素列表时使用委托是有益的，因此您只需添加一个事件处理程序，而不是为每个元素创建处理程序。 在此处阅读更多相关信息。