L’événement de clic ne se déclenche pas après le redimensionnement du navigateur

J’utilise actuellement slick , un carrousel. Lorsque le navigateur est redimensionné au-dessous d’un certain seuil, le carrousel est réglé sur unslick (ce qui signifie qu’il cesse d’être un carrousel et que chaque panneau du carrousel est affiché de manière statique les uns sur les autres). Le réglage est le suivant:

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

Cela fonctionne très bien. Cependant, j’ai aussi une fonction .click qui est appelée quand un élément du carrousel est cliqué. Quelque chose comme:

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

La fonction .click fonctionne lors du chargement initial de la page, mais si la page est redimensionnée, ce n’est plus le cas. Des idées?

Il est possible que le plug-in remplace le code HTML, ce qui entraîne la perte des gestionnaires d’événements atsortingbués à ces éléments DOM. Au lieu de cela, essayez de déléguer les événements au document, comme ceci:

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

Cela permet au document (qui n’est jamais supprimé) de gérer l’événement et de vérifier si la cible réelle de l’événement correspond au sélecteur, dans le cas présent, “#linkInCarousel”. De cette façon, même si l’élément est ajouté après le chargement de la page, le gestionnaire se déclenche correctement.

En général, vous devriez toujours essayer d’utiliser la délégation pour ne créer qu’un seul gestionnaire d’événements par fonctionnalité, par opposition à la création des gestionnaires pour chaque élément. En savoir plus à ce sujet ici.