Accès à mes éléments DOM

**baldeadama** · 16/09/2014, 01h43

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** · 16/09/2014, 08h23

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** · 16/09/2014, 10h00

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** · 16/09/2014, 10h21

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** · 16/09/2014, 10h24

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** · 16/09/2014, 11h51

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. Nom : page.jpg
Affichages : 129
Taille : 20,6 Ko

**Bovino** · 16/09/2014, 12h01

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** · 16/09/2014, 12h12

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.

**freddou17** · 16/09/2014, 12h56

à quel moment le code ci-dessous s’exécute t-il?

Code :

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

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 :

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

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

dans la création de tes boutons, je pense que ça devrait marcher...
++

**baldeadama** · 16/09/2014, 14h48

Merci freddou ça marche.

**darkterreur** · 16/09/2014, 18h56

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

en tout cas belle méthode freddou

**NoSmoking** · 16/09/2014, 20h17

Bonjour,

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(){...}

.

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 :

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
$('#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!

**baldeadama** · 16/09/2014, 22h32

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

Accès à mes éléments DOM [AJAX]

jQuery

Discussions similaires

Partager

Partager