Событие Click не срабатывает после изменения размера браузера

Question

В настоящее время я использую slick, карусель. Когда размер браузера изменяется ниже определенного порога, у меня есть карусель, установленный на unslick (это означает, что он перестает быть каруселем, и каждая панель карусели отображается статически одна поверх другого). Настройка такова:

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

Это прекрасно работает. Тем не менее, у меня также есть функция .click, которая вызывается, когда нажата кнопка в карусели. Что-то вроде:

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

The .click функция работает на начальной загрузке страницы, но если страница изменяется, он больше не делает. Есть идеи?

Answer 1

Плагин может заменить HTML-код, который заставляет его потерять обработчики событий, назначенные этим элементам DOM. Вместо этого попробуйте делегирование события к документу, например:

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

Что это делает позволяет документ (который никогда не будет удален) обрабатывать событие и проверяет, является ли фактической цель мероприятия соответствует селектору , в этом случае '#linkInCarousel'. Таким образом, даже если элемент добавляется после загрузки страницы, обработчик будет срабатывать должным образом.

В общем, вы всегда должны пытаться использовать делегирование, поэтому вы добавляете только один обработчик событий для каждой функциональности, а не для создания обработчиков для каждого элемента. Узнайте больше об этом here.