Accès aux éléments du DOM chargés dynamiquement

**baldeadama** · 27/09/2014, 11h19

BONJOUR Madame/Monsieur;

J ai charger un nouveau contenu dans mon DOM avec

Code :

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

$("#zone_affichage1").load("amis.php");

mais j arrive pas du tout à acceder aux ID de mes boutons qui sont rajoutés afin de les associer à un evenement.

VOIR CODE COMPLET:

fichier p.php

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
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
  <!DOCTYPE html>
<html>
   <head>
      <title>utilisateur</title>
	  <link rel="stylesheet" href="style.css"/>
	  <script src="jquery-2.1.1.min.js"></script>
	  <script src="jquery-ui.min.js"></script>
	  <script>
	    $(function(){
		   //gestion de la liste deroulante
		   //partie à garder pour le moment
		   /*$('#selection').click(function(){
		      if($(selection).val() == "profils"){
		         //$('#zone_affichage').load("profils.php");

				 //recuperer l' id du div où doit etre ajouté le contenu
				 var doc = document.getElementById("zone_affichage");
				 
				 //vider d' abord le div avant de rajouter les elements
				 doc.innerHTML = "";
				 
				 //doc.open();
				 
				 //creation du document
				 //var bt1 = new Array();
				 bt1 = document.createElement("button");
				 bt1.setAttribute("id", "info");
				 bt1.setAttribute("onclick", "alert('toto')");
				 var texte1 = document.createTextNode("Information");
				 bt1.appendChild(texte1);
				 
				 //var bt2 = new Array();
				 bt2 = document.createElement("button");
				 bt2.id= "tofs";
				 var texte2 = document.createTextNode("Photos");
				 bt2.appendChild(texte2);
				 
				 //var bt3 = new Array();
				 bt3 = document.createElement("button");
				 bt3.id= "amis";
				 var texte3 = document.createTextNode("Amis");
				 bt3.appendChild(texte3);
				 
				 //ajouter les elements dans l' arborescence
				 doc.appendChild(bt1);
				 doc.appendChild(bt2);
				 doc.appendChild(bt3); 
			  }
			  else if($(selection).val() == "supprimer"){
			      //rediriger l' utilisateur sur la page supprimer
				  document.location.href="supprimer.php";
	    	  }
		   });   
             */ 

           //code à explorer plus tard
		   $('#selection').click(function(){
		       //si on clique sur profils alors on associe
			   //à la div 'zone_affichage' des elements 
			  if($(this).val() == "profils"){
			  
			    //recuperer l' id de la div 'zone_affichage'
			    var doc = document.getElementById("zone_affichage"); 
				var doc1 = document.getElementById("zone_affichage1");
				
				//vider d' abord les divs avant de rajouter les elements
				doc.innerHTML = "";
		 
				$("#zone_affichage").append( [
				  
				  $('<button></button>',{
					'id': 'info',
					'text': 'Information',
					'on': {
					  'click': function( event ){
					     doc1.innerHTML = "";
					     $("#zone_affichage1").load("donnes_perso.php");
					  }
					}
				  }),
				  $('<button></button>',{
					'id': 'photo',
					'text': 'Photos',
					'on': {
					  'click': function( event ){
						alert('Photos Button cliqued!');
					  }
					}
				  }),
				  $('<button></button>',{
				      'id': 'amis',
					  'text':'Amis',
					  'on':{
					       'click' : function(event){
						      doc1.innerHTML = "";
						      $("#zone_affichage1").load("amis.php");
							  
						   }
					  }
				  }
				  ),
				]);
				
				//zone affichage1
				
			  }
			  
			  //supprimer
			  else if($(this).val() == "supprimer"){
			      //rediriger l' utilisateur sur la page supprimer
				  document.location.href="supprimer.php";
	    	  }
		  });
           		   
		});
	  </script>
   </head>
   <body>
      <header>
		      <div id="parame">
			     <input type="search"/>
			     <select id="selection">
				   <optgroup label="Selectionner une option">
				    <option value="profils">Profils</option>
				    <option value="supprimer">Supprimer</option>
				  </optgroup>
			     </select>
		      </div>
	  </header>
	  <nav
	     <!-- elements de navigations -->
		 <!-- affiche la liste des amis -->
		 <div id="amis">
		   <button class="link">Liste amis</button><br/>
		 </div>
		 <!-- affiche les commentaires -->
		 <div class="commentaire">
		    <button class="link">Commentaires</button>
		 </div>
		 <!-- affiche les messages -->
		 <div id="message">
		    <button class="link">Messages</button><br/>
		 </div> 
	  </nav>
	  <section>
	     <div id="zone_affichage"></div>
		 <div id="zone_affichage1"></div>
	  </section>
   </body>
</html>

fichier amis.php

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
 
  <?php
   session_start();
   //inclure le fichier "users.php"
   require_once 'users.php';
   $i = 1;
  //on recupere la liste des amis et on construit notre petit formulaire
  $utilisateur = new utilisateurs();
  //Recuperer la liste des amis
  $bdd = $utilisateur->search_friends($_SESSION['email']);
  //on parcour la liste d' amis tout en construisant le petit formulaire
  while($lignes = $bdd->fetch(PDO::FETCH_OBJ)){
     //formulaire
	 echo '
	      <div id= "amis'.$i.'">
		   <label>'.$lignes->nom.'</label>
	       <button id= "bouton'.$i++.'">Supprimer</button>
		  </div>
	 ';
  }
?>

**danielhagnoul** · 27/09/2014, 15h26

Bonjour

Différences entre on() avec 1 ou 2 sélecteurs

Accès aux éléments du DOM chargés dynamiquement

jQuery

Discussions similaires

Partager

Partager