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

Question

我目前正在使用 slick , 一个旋转木马。当浏览器的大小调整到低于某个阈值时，我将轮播设置为 unslick(这意味着它不再是轮播，并且每个轮播面板都静态地一个接一个地显示)。设置是这样的:

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

效果很好。不过，我还有一个 .click 函数，当点击 carousel 中的元素时调用该函数。像这样的东西:

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

.click 函数在页面初始加载时起作用，但如果调整页面大小，它就不再起作用。有什么想法吗？

Answer 1

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

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

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

一般来说，在处理元素列表时使用委托(delegate)是有益的，因此您只需添加一个事件处理程序，而不是为每个元素创建处理程序。了解更多信息 here.