Discussion :

[baldeadama]

Bonsoir Madame/Monsieur;

j ai créer trois élements avec dom dans ma fonction jquery et tout ça marche bien. Mais j ai un probleme lorsque j essaye d' acceder à un element, il le voit pas c est à dire rien ne se passe c est comme si l' element n' existait pas. voir le code ci dessous (voir les parties colorées):

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
$(function(){
	//gestion de la liste deroulante
	$('#selection').click(function(){
		if($(selection).val() == "profils"){
		        //$('#zone_affichage').load("profils.php");
                        //document creer avec dom
			//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");
			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";
	    	}
	});  
        //verifier que notre div 'zone_affichage1' n est pas vide
        /*if($.trim($('#zone_affichage').text()) == ""){
		var a = $('button').attr('id');
		alert("blabla");
		//on recupere le bouton sur lequel on a cliquer
		$('#info').click(function(){
			alert('merci info');
		});
	}*/
	//acces au bouton "Information" via son id
	$('#info').click( function(){
		alert('cool');
	}
);
});

Code html :

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
<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</input><br/>
	</div>
	<!-- affiche les commentaires -->
	<div class="commentaire">
		<button class="link">Commentaires</input>
	</div>
	<!-- affiche les messages -->
	<div class="message">
		<button class="link">Messages</input><br/>
	</div> 
</nav>
<section>
	<div id="zone_affichage"></div>
	<div id="zone_affichage1"></div>
</section>

[Bovino]

Code html :

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

<nav

Code html :

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

<button class="link">Liste amis</input>

Avec des codes HTML comme ça, inutile de se demander pourquoi jQuery a du mal à s'y retrouver.

[baldeadama]

Code html :

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

<button class="link">Liste amis</input>

avec ce code je peux bien acceder aux elements sans souci. le probleme reside dans mon element créer à partir du dom

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

quand je fais le bout de code ci-dessous, rien ne se passe, on dirai qu' il ne voit pas l' id="info"

Code :

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

1
2
3
4
//acces au bouton "Information" via son id
$('#info').click( function(){
	alert('cool');
}

merci pour votre reponse.

[freddou17]

Ce que Bovino veut dire c'est que ton code est faux tout simplement

Code html :

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

<button class="link">Liste amis</input>

et du coup il faudrait corriger les erreurs de syntaxe avant de chercher un autre problème

C'est pas parce que la récupération d'un élement marche bien qu'il faut en conclure que la structure DOM est bonne.

Bon courage ++

[Bovino]

Si tu ouvres une balise <button>, tu ne peux pas la fermer avec </input>, ça n'a aucun sens et perturbe JavaScript lorsqu'il parse le DOM.
Alors ce n'est peut-être pas la cause directe de ton problème, mais c'est à corriger quand même.

Pour ce qui est de ton problème, c'est juste une question de chronologie.
Tu crées deux gestionnaires d'événement.
Le premier va créer des éléments lorsque tu vas cliquer sur $('#selection') et le second affiche une alerte lorsque tu cliques sur $('#info').
Sauf que quand tu déclares ton second gestionnaire, l'élément en question n'existe pas ! C'est comme si tu demandais à ta femme de t'apporter ton apéro alors que t'es pas marié... tu risques d'attendre longtemps et quand tu te marieras, c'est pas pour autant que ta femme t'apportera ton apéro puisqu'elle n'existait pas quand tu l'as demandé.

[baldeadama]

Code html :

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

<button class="link">Liste amis</button><br/>

code corriger.

voilà je reexplique:
lorsque je clique sur l' option profils de ma liste deroulante (

Code html :

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

1
2
3
4
5
6
<select id="selection">
	<optgroup label="Selectionner une option">
	<option value="profils">Profils</option>
	<option value="supprimer">Supprimer</option>
	</optgroup>
</select>

),
j' ai cette partie de dom qui est rajouter dans ma page:

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
bt1 = document.createElement("button");
bt1.setAttribute("id", "info");
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);

donc vous etes d' accord avec moi que les boutons (Information, Photos et Amis) sont rajoutés dans ma page (voir image jointe), quand je clique sur le bouton "information" mon bout de code ci dessous ne s' execute pas (

Code :

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

1
2
3
$('#info').click( function(){
	alert('cool');
});

)
et pourtant les elements créer existe dans la page.

[Bovino]

Certes, les boutons existent lorsque tu cliques dessus (sinon, il y aurait un gros problème : comment arriverais-tu à cliquer sur des boutons qui n'existent pas ) sauf que lorsque tu déclares le gestionnaire d'événement indiquant que lorsqu'on clique dessus, il faut afficher une alerte, les éléments n'existent pas encore ! Donc ton gestionnaire ne s'applique à rien.

[baldeadama]

t a vu la pièce jointe. alors comment tu peux me dire que les elements n' existent pas encore et ils sont affichés dans la page. donc en cliquant sur le bouton <<Information>> il devrait m' afficher l' alerte. sauf c est pas le cas. Si vous avez une solution à me proposer ca serait la bienvenue.