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

Question

我目前正在使用slick，一个旋转木马。当浏览器调整大小低于某个阈值时，我将轮播设置为unslick（意味着它不再是轮播，每个轮播面板静态显示在另一个上面）。设置如下：

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

效果很好。但是，我还有一个.click函数，当单击carousel 中的元素时会调用该函数。类似的东西：

$(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＆＃39;。这样，即使在页面加载后添加元素，处理程序也会正常触发。

通常，您应该总是尝试使用委托，这样您只需为每个功能添加一个事件处理程序，而不是为每个元素创建处理程序。详细了解here.