Pour associer un gestionnaire d'événement au clic sur une image, il est d'usage de procéder comme suit :
$(function() {
$('img.uneclasse').click(function(event) {
...
});
});
Puisque le code jQuery est exécuté sur le document.ready ( dans le $(function() { ... }); ), il est exécuté dès que le chargement des balises HTML est terminé. Ceci sera tout à fait fonctionnel dans la grande majorité des cas.
Cependant, dans certaines situations, il faut associer un gestionnaire d'événement au clic sur une image qui ne sera générée que dans un deuxième temps. Ce serait le cas, par exemple, si une liste de produits était générée par AJAX après avoir sélectionné une catégorie dans une liste déroulante. Les images permettant de modifier ou de supprimer chacun des produits n'existeraient encore pas lorsque le document.ready serait exécuté.
Dans une telle situation, il faut associer le gestionnaire d'événement au clic sur le document et non sur l'image en tant que telle. On aura donc un événement de type « document.on(click) » plutôt que « balise.click »
Dans l'exemple suivant, puisque l'événement est sur le document, le code fonctionnera même pour les balises générées après l'assignation de l'événement.
$(function() {
// Important : ici, les images seront générées après l'assignation du gestionnaire d'événement.
// Il faut que l'événement soit sur le document pour que ça fonctionne.
// Un événement sur l'image ne fonctionnera pas :
$(document).on('click', 'img.uneclasse', function(event) {
...
});
});
L'utilisation de $(document).on nécessite un peu plus de travail de la part de jQuery que si on avait utilisé directement $(selecteur).evenement. Comme c'est expliqué sur la page officielle de jQuery, ce travail supplémentaire aura peu d'impact sur des événements qui surviennent peu fréquemment, par exemple click ou change. Par contre, l'impact se fera sentir sur des événements comme mousemove ou scroll qui peuvent survenir des dizaines de fois par seconde.
En raison de cette perte de performance potentielle, il est préférable de réserver la syntaxe$(document).on aux cas où c'est vraiment nécessaire, par exemple lorsque le sélecteur est généré après le chargement de la page.
« jQuery attaching events document.on vs document.ready ». Derek Tor. http://derektor.me/jquery/events/2016/04/07/jquery-document-on.html
▼Publicité
