Récupérer noeud généré par ajax

[pluche52]

Bonjour ,

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à....

Merci beaucoup !

[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() )

[pluche52]

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

[supersnail]

Bonjour,

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

[pluche52]

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 !

[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");});