Discussion :

[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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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

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

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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]

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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