Accès à mes éléments DOM

Version imprimable

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:

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:

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>

16/09/2014, 08h23
Bovino

Code:

<nav

Code:

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

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

jquery

Code:

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

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:

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

merci pour votre reponse.

16/09/2014, 10h21
freddou17

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

Code:

<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 ++
16/09/2014, 10h24
Bovino

:nono:

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

1 pièce(s) jointe(s)

jquery

Code:

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

code corriger.

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

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:

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:

1 2 3 $('#info').click( function(){ alert('cool'); });
)
et pourtant les elements créer existe dans la page.Pièce jointe 156325

16/09/2014, 12h01
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 :aie:) 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.
16/09/2014, 12h12
baldeadama

jquery

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.
16/09/2014, 12h56
freddou17
à quel moment le code ci-dessous s’exécute t-il?
Code:

1 2 3 4 $('#info').click( function(){ alert('cool'); });
Ce que te dis Bovino c'est les éléments sont bien créés mais que l'ajout de l’événement onclick se fait trop tôt (si j'ai bien compris).

Rajoutes :

Code:

bt1.setAttribute("onclick", "alert('toto')");

dans la création de tes boutons, je pense que ça devrait marcher...
++
16/09/2014, 14h48
baldeadama

ajax

Merci freddou ça marche.
16/09/2014, 18h56
darkterreur

Donc c'est résolu ?
je suppose que oui

en tout cas belle méthode freddou

Bonjour,

Citation:

Envoyé par darkterreur

en tout cas belle méthode freddou

de toutes les méthodes possibles pour affecter un événement à un élément, cette solution est obsolète et la moins bonne de toutes, oElement.addEventListener(...) ou encore oElement.onclick = function(){...} :aie:.

Tout autre chose concernant le code de baldeadama.

J'ai un peu de mal à comprendre qu'utilisant jQuery tu utilises du "vanilla" javascript plus que de raison. Utilise les possibilités qui te sont offertes par cette librairie mais avant tout il faut que tu en comprennes la philosophie.

Il y a lourd à parier que si tu avais fait cela sans jQuery ton erreur te serais apparue plus rapidement attendu que ta console aurait hurlée ?

exemple de ce que tu aurais pu faire en jQuery
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 $('#selection').click(function(){ if($(this).val() == "profils"){ $("#zone_affichage").append( [ $('<button></button>',{ 'id': 'info', 'text': 'Information', 'on': { 'click': function( event ){ alert('Information Button cliqued!'); } } }), $('<button></button>',{ 'id': 'photo', 'text': 'Photos', 'on': { 'click': function( event ){ alert('Photos Button cliqued!'); } } }), ]); } });
Grâce à ton code tu risques de te retrouver avec moult BUTTON, à chaque clic sur le SELECT ce qui n'est peu être pas ton but.

Maintenant je me demande si un simple affichage/masquage de la DIV id="zone_affichage" ne serait tout simplement pas plus efficace.

J’espère quand même que tu as bien compris l'erreur de raisonnement que tu faisais!

16/09/2014, 22h32
baldeadama

kquery

Merci NoSmoking. car tout ce que je recherche c est la performance et tn raisonemment me semble meilleur et je vais l' adapter.

Merci pour une fois de tn raisonnement