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

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”。这样，即使元素是在页面加载后添加的，处理程序也会正确触发。

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

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

Click event doesn’t fire after browser resize

javascript

jquery

html

css

slick.js