jQuery live, pensez-y si vous modifiez du contenu dom

En tant que développeur php je gère de temps en temps des projets web seul. C’est a dire que je suis contraint de m’occuper de la partie CSS et Javascript si il y a. Du coup j’utilise jQuery pour me simplifier la tache du Javascript.

Dans cet article une petite info qui peut vous donner un sérieux coups de main, enfin surtout un économie de temps de recherche quand à un problème que nous somme plusieurs a avoir rencontré.

Prenons par exemple le listener click. La ou ça coince (avec la méthodo ci-dessous), c’est que l’ajout du listener (click ou autre) porte sur le dom existant. Si l’on ajoute du dom il faut re-spécifier le listener sur le nouveau contenu.

Exemple:

<ul id="mylist">
  <li class="element"><a href="#">bla1</a></li>
  <li class="element"><a href="#">bla1</a></li>
</ul>

<script>
  $('a.clickme').click(function()
 {
   alert('hello');
 });
 $.getJSON('/url', function(response) {
    // Adding li to ul#mylist
    // ...
  });
</script>

Dans l’exemple ci-dessus on considère que l’appel ajax ajoute des éléments a la liste.

Après la modification du dom le listener ‘click’ n’écoutera pas les click sur les nouveaux a.clickme. Ce qui est en fait tout a fait logique puisque ces éléments n’existait pas lors de la mise en place de $(‘a.clickme’).click.
Pour cela il faut utiliser live car ce listener prendra en compte les nouveaux éléments du dom :

$('a.clickme').live("click", function(){
  alert('hello);
});

Une réflexion sur « jQuery live, pensez-y si vous modifiez du contenu dom »

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *