CE BLOG N'EST PLUS MIS A JOUR !
POUR DES INFORMATIONS RECENTES VEUILLEZ VOUS RENDRE ICI
Bienvenue sur le blog d'un développeur web : Actualités du monde informatique et scientifique, morceaux de programmations et diverses informations intéréssantes.

jQuery : executer des événements sur des éléments rajoutés au DOM

Posté par : Neg le : 2009-04-14 00:12:08



J'ai récemment rencontré un problème en développant une fonctionnalité ajax avec jQuery. En effet si l'on modifie le DOM (Document Object Model) d'une page et que l'on veut effectuer des événements javascript sur des éléments que l'on vient de rajouter à la page, cela ne fonctionne pas. Les modifications n'étant pas prisent en compte par défaut il faut utiliser la fonction live() pour qu'elles soient détectées.

Comme j'ai un peu galéré pour trouver cette astuce je donne ici le code, ça en aideras surement certains si cette page est bien indexée.

cas simple mis en pratique : on a une page contenant 3 liens de classe ".lettre" A, B et C. lors du clic sur un de ces éléments nous allons via la fonctions ajax() récuperer une liste de liens à afficher dans le div "ajout" aussi présent sur notre page. Jusqu'ici pas de problème avec le code suivant. (recuplisteliens.php étant un fichier nous renvoyant la liste de liens correspondante.)

Dans le head de la page

//on inclut la dernière version de jQuery
<script type="text/javascript" src="jquery-1.3.1.min.js"></script>
//et notre code
<script language="javascript" type="text/javascript>
$(document).ready(function() {
//au clic sur les élément .lettre
$(".lettre").click(function(){
//on fait notre requête ajax
$.ajax({
type: "GET",
url: "recuplisteliens.php?lettre="+$(this).attr("id"),
dataType : "html",
//affichage de l'erreur en cas de problème
error:function(msg, string){
alert( "Error !: " + string );
},
success:function(data){
//et on place les donnees renvoyees dans notre div ajout
$("#ajout").empty();
$("#ajout").append(data);
}});
});
});
<script>


le code du corp de notre page

<a class="lettre" id="A"> A </a><a class="lettre" id="B"> B </a><a class="lettre" id="C"> C </a>
<div id="ajout">
</div>


Maintenant utilisons la fonction live pour pouvoir effectuer des actions sur nos nouveau liens, sans cette fonctions aucun résultat n'est obtenu. Voici le code à ajouter dans le "$(document).ready(function() {" vu au dessu :


$("#ajout a").live("click", function(){
//simple alerte
alert("ca marche");
});

Ici une simple alerte est lancée, mais n'importe quelle autre action comme une nouvelle requête ajax peut être envoyée, on peut ainsi modifier notre page à la volée sans limite.

la demo en ligne

lien direct : http://numa-bord.com/old/leblog/chezneg-leblog.php?id_art=182&titre=jQuery-:-executer-des-événements-sur-des-éléments-rajoutés-au-DOM
tags : Informatique (68), compétences (22), travail (18), jQuery (12), javascript (9),


J'aime, 2 personnes aiment çaCommentaire(s)(15)

1) Honemo le : 2009-04-14 16:55:22 www.honemo.com

LOOOOL
Bah il été temps que le petit Numa se réveille ^^

Mais en effet c vraiment génial tout l'ajax et les possibilités qu'il nous permet.

Même au niveau graphique il permet de faire des anims simpa avec juste l'utilisation de javascript et de gif en fonction des choix de l'utilisateur ;)
Bref tu l'a compris on en est qu'au début du balbutiement.
Allé tchouss et pensez à venir voir un peu mon site www.honemo.com


Il était temps que je me réveille ? la fonction live est apparue dans la dernière et récente version de jQuery (1.3). J'ai plutôt eu de la chance de pas avoir eu des cas comme celui-ci a coder plus tôt. C'était à mon avis une des grosse lacune de jQuery.

3) sam le : 2009-04-19 13:44:26 http://www.g-annuaire.com

j'ai eu récemment le même problème et j'ai résolu le problème en retirant :

$(document).ready(function() {

dans les liens récupérés.

4) Steve le : 2009-04-24 14:27:43 http://www.adresse-ip.biz

OUAAAAHH !!
Toi tu es mon héros du jour...après avoir galéré plus de 3 heures et chercher dans les méandres de Google j'ai enfin trouvé ton post qui me sauve les neurones !!

J'avais abandonné mes recherches il y a quelques minutes et commençais à ajouter des onclick dans le fichier chargé ! et puis je me suis "Mais m..de bor..el ça doit exister ce que je cherche !!!"

Merci mille fois mon ami !!

Steve

5) Dam le : 2009-06-25 10:56:59

Tu me sauve la vie ;)

C'est exactement ce que je cherchais. Je fais un rapatriement de liste sur ma page grâce à AJAX et je souhaite faire des actions click sur cette même liste.

Sans ton bout de code, j'étais perdu ^^

Merci

6) phsept le : 2009-12-18 16:46:21

Des heures de recherche et enfin la réponse ! C'est dingue ça, ça devait pas être indiqué plus clairement dans la documentation officielle de jquery (ou je l'aurais raté) ? Un grand merci en tout cas !

7) Dr_snake le : 2010-07-16 15:05:58

Et bien, ce post date un peu mais il continue à faire gagner du temps à certaines personnes :)

Je suis très débrouillard mais il est vrai que certaines fois il faut pas mal de temps avant de trouver la solution à un problème.

Je suis tombé sur ton post en quelques secondes et au nom de tous les développeurs je te remercie :)

Partager ses connaissances il n'y à que ça de vrai !

Merci encore pour ce gain de temps ;)

8) Jaja13 le : 2010-09-12 12:40:43

Franchement merci pour cette explication simple et claire qui permet de solutionner facilement l'actualisation de document sans se prendre la tête sur l'ordre d'apparition des nouveaux éléments dans le DOM.
Bref un grand merci.

9) blopjerem le : 2011-01-11 15:00:50 twee-b.fr

Vraiment super. je cherche depuis pas mal de temps comment résoudre se petit problème.
Merci Merci Merci :)

10) Mdenys le : 2011-06-28 11:38:58 www.mariandenys.com

Merci pour ce tutoriel, l'emploi de la fonction live() est vraiment très pratique dans certains cas.

11) Axel le : 2011-07-12 23:38:33 http://www.id-meneo.com/

Wha putain j'aime ce site! tu sauves la vie avec cette fonction live.
nb coquille :"n'étant pas priseS en compte"

12) morgan le : 2012-03-23 09:08:34 http://www.morganperaud.com

super merci pour l'info ça me sauve aussi


yes merci beaucoup pour l'article !!!

14) julie le : 2012-07-23 21:18:53 http://www.formation-web.org/

Yes, un grand merci...

Mais pourquoi, pourquoi elle ne fonctionne pas la fonction click ;)

15) Lal le : 2012-07-27 02:25:56

Merci beaucoup.


Les derniers articles :
Les derniers articles de mon nouveau blog développeur
Nouvelle version de mon portfolio
Ouverture du site profitvacances.com
Utiliser la géolocalisation et styler une carte google map
Faire un slider simplement avec jQuery
Système de pagination en PHP sur une requête Mysql
Trouver les éléments à proximité sous MySql via leurs longitude et latitude
Stockage de données dans le cloud (SugarSync, DropBox, SkyDrive, BitCasa)
PHP : Recuperer les balises images d'un document (une page) HTML
PHP : faire un lecteur RSS grâce à simplexml_load_file

propulsé par Neg