Cedric SADAI - Consulting en strat?gie Internet

Si vous utilisez jQuery, vous pratiquez certainement la manipulation du DOM. Par exemple, lorsque vous créez des objets à la volée, le DOM se trouve modifié. Malheureusement, jQuery n’intègre pas automatiquement les éléments que vous rajoutez à sa surveillance (listeners).

Travaillons sur un bout de code basique:

<input type="button" id="add" value="add another radio button" />
<input type="radio" name="cool" value="cedric" />

<script language="JavaScript">
$(document).ready(function(){

	$(":radio").click(function(){
		alert($(this).val());
	})

	$("#add").click(function(e){
		e.preventDefault();
		var $v = Math.random(1, 100);

		$("#container").append('
 value:'+$v+'');
	})
})
</script>

Dans cet exemple, le click sur les éléments que vous ajoutez au fur et à mesure ne déclenche aucune action nativement (à l’inverse de l’élément créé à la base, avec “cedric” comme valeur). C’est un gros problème quand on souhaite ajouter du dynamisme à ses documents tout en bénéficiant des écouteurs globaux.

Heureusement, il existe une solution: le plugin LiveQuery. Il ne serait pas étonnant qu’il intègre le coeur de jQuery tant il contourne un problème fondamental. Reprenons l’exemple précédent. Nous allons simplement changer une ligne, celle qui fait que jQuery écoute le click sur les éléments de type radio.

Avant:

	$(":radio").click(function(){
		alert($(this).val());
	});

Après:

	$(":radio").livequery('click', function(){
		alert($(this).val());
	});

Et vous pouvez ajouter autant d’éléments identiques au DOM, ils répondront tous de la même manière lorsque vous déclenchez un événement dessus.