Recupération d'id à la volée

**Johngtrs** · 03/06/2012, 22h38

Bonsoir,

Dans une page php, je génère des balises <a> qui ont un id qui s'incrémente automatiquement, selon le résultat du nombre de ligne de la base de données.

id1
id2
etc...

J'aimerais appliquer l'évènement onclick en JavaScript, sur chaque nouveau lien créé. J'ai fais comme ceci, dans l’événement window.onload de la page, mais ça ne marche pas :

Code :

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

1
2
3
4
5
6
7
8
9
var k = 0;
while (document.getElementById("group" + k)) {
	if (document.getElementById("group" + k)) {
		document.getElementById("group" + k).onclick = function() {
			alert(this.id);
		}
	}
	k++;
}

Pouvez vous m'aider ?

John.

**NoSmoking** · 03/06/2012, 23h01

Bonsoir,
tu as d'un coté des id1, id2... et de l'autre tu cherches des group1... ????

une question

Code :

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

1
2
while(document.getElementById("group" + k)) {
  if (document.getElementById("group" + k)) {// pourquoi ce TEST ?

**Johngtrs** · 03/06/2012, 23h13

Non non des deux cotés j'ai group0, group1 etc... pardon ^^.

Ce test ? C'était pour tester si ils existent bien. Mais je pense qu'il est useless.

**NoSmoking** · 03/06/2012, 23h20

...ça ne marche pas :

ceci est trop vague.

Suggestion quand même

Code :

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

1
2
3
4
5
6
7
8
var k = 0;
while (document.getElementById("group" + k)) {
    document.getElementById("group" + k).onclick = function() {
        alert(this.id);
        return false; // annule action par défaut
    }
    k++;
}

**Johngtrs** · 03/06/2012, 23h25

Quand je dis ça ne marche pas, ça veut dire que ça ne passe pas par l'évènement, j'ai aucun retour. De même avec le return false.

J'ai même fais un test en dur et ça ne passe toujours pas par l'évènement :

Code :

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

1
2
3
document.getElementById("group0").onclick = function() {
	alert(this.id);
}

**NoSmoking** · 03/06/2012, 23h37

pourtant ceci fonctionne parfaitement

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
<!DOCTYPE HTML>
<html lang="fr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>[...]</title>
</head>
<body>
<a id="lien0" href="page1.html">page1</a>
<a id="lien1" href="page2.html">page2</a>
<a id="lien2" href="page3.html">page3</a>
<script type="text/javascript">
var i = 0;
while( document.getElementById( 'lien' +i)){
  document.getElementById( 'lien' +i).onclick = function(){
    alert( this.id);
    return false;
  }
  i++;
}
</script>
</body>
</html>

l'erreur semble être ailleurs!

**Johngtrs** · 03/06/2012, 23h42

Mes liens ne sont pas créés directement lorsque la page est chargée.

Dans un premier temps j'ai un index alphabétique, lorsque je clique sur une lettre, c'est à ce moment là que mes liens sont créés.

Peut être que le problème vient de là ?

**NoSmoking** · 03/06/2012, 23h46

c'est à ce moment là que mes liens sont créés.

il est effectif que pour pouvoir affecter un événement à un élément il faut que l'élément existe.

C'est au moment de leur création qu'il te faut affecter l'événement.

**Johngtrs** · 03/06/2012, 23h50

Comment je peux affecter l'évènement lorsque je les créés ? C'est une page php qui gère ça (le serveur plus précisément), à ce moment là :

Code :

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

1
2
3
4
5
while ( $k < $nb_resultats ) {
	$nom = pg_result ( $requete, $k, "nom" );
	echo "<a href='#' id='group$k'>" . ucwords ( $nom ) . "</a><br/>";
	$k ++;
}

**Bovino** · 04/06/2012, 08h04

Sinon, tu peux utiliser la délégation d'événements :

Code html :

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

1
2
3
<div id="aContainer">
<!-- C'est ici que tu insèreras tes liens -->
</div>

Puis ton JavaScript :

Code :

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

1
2
3
4
5
6
document.getElementById('aContainer').onclick = function(event){
    var target = event.target ? event.target : event.srcElement;
    if(target && target.tagName.toLowerCase () == 'a'){
        alert(target.id);
    }
}

**andry.aime** · 04/06/2012, 08h49

Et le script de Spaffy?

**SpaceFrog** · 04/06/2012, 08h58

Et sinon regarder tout simplement le code html généré ?

**Johngtrs** · 04/06/2012, 13h43

Merci pour vos réponse.

Dans l'après midi je testerais la réponse de Bovino.

Sinon je trouve que le script est assez compliqué, je le regarderais plus attentivement si je n'y arrive toujours pas.

SpaceFrog, j'ai déjà regardé, les id des liens sont bien incrémentés.

**Johngtrs** · 04/06/2012, 17h55

Avec la réponse de Bovino ça marche, après vu que j'ai d'autres liens qui apparaisse dans la même div, lorsque j'utilise le moteur de recherche du site, donc ça passe aussi dans l'évènement. Mais bon je vais essayer d'arranger ça.

Sinon, je pourrais avoir une explication sur les lignes suivantes ?

Code :

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

1
2
3
4
var target = event.target ? event.target : event.srcElement;
    if(target && target.tagName.toLowerCase () == 'a'){
        alert(target.id);
}

**Bovino** · 04/06/2012, 20h02

La délégation d'événements consiste à poser un écouteur sur un unique élément parent. L'avantage est d'une part d'éviter de multiplier les gestionnaires si plusieurs éléments doivent avoir le même comportement et d'autre part de permettre de prévoir une gestion d'événements avant que les éléments en rapport ne soient insérés dans le DOM.

C'est cela que fait la portion de code que tu montres. On utilise l'objet event de l'événement pour récupérer l'élément qui a reçu l'événement (event.target) afin de déterminer s'il correspond au type d'élément souhaité (ici tagName == 'a', mais tu aurais pu tester un nom de classe par exemple : event.target.className), si c'est le cas, on lance le traitement souhaité.

Attention, IE ne gère pas les événements comme les autres navigateurs, en particulier, le W3C préconise l'envoi de l'objet event en paramètre automatique de la fonction de rappel alors qu'IE, dans ses anciennes versions, attache l'objet event au contexte global window, pour pallier cela, j'utilise le nom event pour que le reste du code soit compatible.

**Johngtrs** · 04/06/2012, 20h16

Merci beaucoup pour ces précieuses réponses ^^. C'est très intéressant.

A bientôt ^^.

**NoSmoking** · 04/06/2012, 21h51

Bovino, trop modeste pour citer

Comment attacher un événement à un élément qui n'est pas encore présent dans la page ?

**Johngtrs** · 04/06/2012, 22h40

Au fait, que veut dire le point d’interrogation ?

Code :

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

event.target ? event.target : event.srcElement;

**NoSmoking** · 04/06/2012, 22h52

il s'agit d'un opérateur ternaire ou opérateur conditionnel

condition ? valeur_VRAI : valeur_FAUX

Opérateurs spéciaux

**Johngtrs** · 05/06/2012, 00h01

Hum d'accord, donc dans ce cas, ça voudrait dire :

si j'ai un event.target je retourne vrai sinon je retourne faux il n'y a pas d'event ?

Recupération d'id à la volée

JavaScript

Discussions similaires

Partager

Partager