[AJAX] Récupérer noeud généré par ajax

Version imprimable

09/01/2011, 16h54
pluche52

[AJAX] Récupérer noeud généré par ajax
Bonjour :P,

Pour un projet, je suis en train de développer un site web devant être fait uniquement en Ajax et Javascript avec l'aide du framework JQuery.
Au chargement de la page index, c'est donc des fichiers JS qui se chargent de construire entièrement l'arborescence du site.
Ceci est fait et fonctionne, mon problème est que maintenant je veux recupérer certains noeuds générés dynamiquement pour leur adjoindre des évènements.

Concrètement:
J'ai un noeud généré par Ajax:

Code:

<div id="test">Coucou</div>

Si avec l'aide de JQuery je fais ça:
Code:

1 2 3 4 5 6 $(document).ready(function() { $("#test").click(function() { // code }); });
Rien ne se passe sauf si mon noeud est écrit en dur dans la page....
J'en appelle donc à vos lumières car je bloque là....:cry:

Merci beaucoup !
09/01/2011, 17h12
supersnail

Bonjour,

Il faut peut-être assigner ton évènement APRES la création du div, et non pas au chargement de la page (ce que tu fais via $(document).ready() ) ;)
09/01/2011, 18h08
pluche52

Citation:

Envoyé par supersnail

Bonjour,

Il faut peut-être assigner ton évènement APRES la création du div, et non pas au chargement de la page (ce que tu fais via $(document).ready() ) ;)

Merci pour ta réponse qui est loin d'être bête ;)
Seulement je débute en JQuery mais même en cherchant dans la doc je ne vois pas comment gérer ça, j'ai vu la méthode ajaxComplete() mais je ne sais pas comment l'utiliser et si je dois l'utiliser.... peux-tu m'en dire plus s'il te plait ?
Merci encore :P
09/01/2011, 18h14
supersnail

Bonjour,

Pourrais-tu me montrer comment tu crées ces noeuds? (le code ;) )

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
 
$(document).ready(  
 function()
 {
   $.ajax( {
            type: "GET",
            url: "./sources/produits.xml",
            dataType: "xml",
            success: function(xml) 
                     {
                       $(xml).find('produit').each(   
                         function()
                         {
                            var titre = $(this).find('titre').text();
                            var desc = $(this).find('description').text();
							var prix = $(this).find('prix').text();
							var image = $(this).find('image').text();
                            $('<div class="produit">' +
									'<div class="illustration">' +
										'<div class="image"><img src="' + image + '" alt="' + titre + '"></div>' +
										'<div class="prix">' + prix + '</div>' +
									'</div>' +
									'<div class="description">' +
										'<div class="titre">' + titre + '</div>' +
										'<div class="desc">' + desc + '</div>' +
										'<div class="acheter">' +
											'<div class="button"></div>' +
										'</div>' +
									'</div>' +									
								'</div>').appendTo('#produits');
                          });
                      }
        });
  }
);

Voili voilou merci ! :)

10/01/2011, 18h11
supersnail
Bonjour,

Il faut simplement mettre le code qui crée l'évènement juste après la création de celui-ci. Par exemple:
Code:

1 2 3 var elem = $('<div class="test">Cliquez moi</div>').appendTo("#contenu"); elem.click(function(){alert("Bouh");});