jQuery : les événements sur des éléments chargés en AJAX

En jQuery, lorsque vous chargez des éléments avec l’AJAX vous remarquez que vous ne pouvez pas gérer les événements sur ces éléments, pourquoi ? Parce qu’il ne sont pas présents au chargement du DOM ! Donc, comment faire ?

Un exemple, #element est chargé en AJAX, donc ceci ne fonctionnera pas :

$('#element').click(function() {

});
// ou
$('#element').bind('click', function() {

});
// ou
$('#element').on('click', function() {

});

La solution obsolète : avec jQuery inférieure à 1.7

A la place de .bind() on utilisera .live(). C’est obsolète parce que cette solution attachera l’événement à tous les éléments existants mais sera déclenché seulement si le sélecteur indiqué arrive à un moment ou un autre dans le DOM. Cette solution est très gourmande en ressources.

Ce qui donnera :

$('#element').live('click', function() {

});

La nouvelle solution : avec jQuery supérieure à 1.7

Pour palier ce problème de performance, la version de 1.7 a fait apparaître une nouvelle méthode, .on() ! J’ai d’ailleurs consacré un article entier à ce sujet.

Pour que cette méthode soit performante vous devez indiquer à la fois le sélecteur, ici #element et son parent direct.

Admettons ce HTML après la requête Ajax :

<div id="contenu">
	<div id="page">
		<div id="element"></div>
	</div>
</div>
  • Avec .live(), #contenu et #page vont recevoir l’événement « en attendant » l’arrivée d’#element
  • Avec .on() on va lui dire d’attacher l’événement seulement à #page
$('#page').on('click', '#element', function() {

});

C’est cette solution qu’il faut utiliser à présent ! Pour les différentes syntaxes de .on() je vous invite à lire l’article lié.

Vous aimerez aussi...