瀏覽器調整大小后點擊事件不會觸發

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”。 這樣，即使在頁面加載后添加元素，處理程序也會正確觸發。

通常，在處理元素列表時使用委托是有益的，因此您只需添加一個事件處理程序，而不是為每個元素創建處理程序。 在此處閱讀更多相關信息。