Discussion :

[Killua69]

Salut, j'ai un problème assez embetant avec ce code:

Code :

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

1
2
3
4
5
6
7
8
9
10
 
function EditInPlace() {
	var v=getElementsBySelector("span.editinplace");
	var l=v.length;
	for(i=0;i<l;i++)
	{
	    var id_span = v[i].id;
	    addEvent(v[i],'click',function() { ShowEditInPlace(id_span); });
	}
}

Qui va attacher un évènement clic sur tous les <span class=editinplace> avec le même id à chaque fois, le dernier de mon tableau.

Si j'ai par exemple:
<span id=s1 class=editinplace>Test</span>
<span id=s2 class=editinplace>Test</span>
<span id=s3 class=editinplace>Test</span>

Chaque clic sur n'importe lequel de ces 3 spans appelera ShowEditInPlace(s3).
Le comportement correct serait d'appeler ShowEditInPlace avec en paramètre le bon id pour chaque span.

Si je fais en dur:

Code :

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

1
2
3
4
 
addEvent(v[0],'click',function() { ShowEditInPlace(v[0].id); });
addEvent(v[1],'click',function() { ShowEditInPlace(v[1].id); });
addEvent(v[2],'click',function() { ShowEditInPlace(v[2].id); });

Après le for, en enlevant la ligne addEvent du for, ShowEditInPlace aura à chaque fois le bon paramètre si je clic sur un des spans = c'est le comportement que je voudrais avoir.

Une idée de pourquoi celà ne marche pas lorsque je le fais dans le for?

[SpaceFrog]

oui sujet déja discuté et résolu et doit d'ailleurs figurer dans la FAQ ..
je recherche ...

[edit]
trouvé
http://javascript.developpez.com/faq...lick.dynamique

[Killua69]

Merci SpaceFrog

[BaBeuH]

Une autre solution :

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
 
function EditInPlace() {
	var v=getElementsBySelector("span.editinplace");
	var l=v.length;
	for(i=0;i<l;i++)
	{
	    var buildFunction = function()
	    {
	        return function()
                {
                    var id_span = v[i].id;
                    ShowEditInPlace(id_span);
                }
            }
	    addEvent(v[i],'click',buildFunction());
	}
}

Je ne sais pas s'il y a une "meilleure" solution, mais le fait d'attacher une propriété à un élément html me "gène", mais c'est du chipotage...

A+

[sekaijin]

On peut faire beaucoup plus simple

Code :

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

1
2
3
4
5
6
7
8
function EditInPlace() {
	var v=getElementsBySelector("span.editinplace");
	var l=v.length;
	for(i=0;i<l;i++)
	{
	    addEvent(v[i],'click',ShowEditInPlace);
	}
}

vous allez me dire que la fonction ShowEditInPlace ne sait pas sur quel objet travailler
c'est très simple this

je suppose que ta fonction ShowEditInPlace prend l'id en argument et fait un getElementById pour retrouver le span

alors que this est l'élément en question pas besoin de le chercher
pour t'en convaincre fais ceci

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
 
function ShowEditInPlace() {
  alert(this.id);
}
 
function EditInPlace() {
	var v=getElementsBySelector("span.editinplace");
	var l=v.length;
	for(i=0;i<l;i++)
	{
	    addEvent(v[i],'click',ShowEditInPlace);
	}
}

généralement quand je fais ça je fais en sorte que le nom de la fonction me renseigne sur le fait que c'est un gestionnaire d'évènement.

si tu tient à ce que ta fonction ShowEditInPlace reste une fonction normale
tu peux faire

Code :

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

1
2
3
4
5
6
7
8
function EditInPlace() {
	var v=getElementsBySelector("span.editinplace");
	var l=v.length;
	for(i=0;i<l;i++)
	{
	    addEvent(v[i],'click',function() {ShowEditInPlace(this.id)});
	}
}

A+JYT

[Bovino]

le fait d'attacher une propriété à un élément html me "gène", mais c'est du chipotage...

Tu n'attaches pas une propriété à un élément HTML mais à un objet JavaScript de type HTMLElement, or l'intérêt d'un objet est bien de lui affecter des propriétés et des méthodes. Je ne vois donc pas ce qu'il y a de gênant

[sekaijin]

c'est un truc que je ne comprends pas moi aussi
on vois partout des dev où on crée des variables des objet des fonction globales qui ensuite font des recherches dans le DOM pour manipuler les objets de la page

alors que le DOM à été conçu pour ça pour porter les méthodes et les attributs des éléments.

c'est tout de même beaucoup plus facile d'attacher les attribut et les méthodes à l'objet qui en est le porteur plutôt que de les mettre ailleurs pour ensuite essayer tant bien que mal de retrouver ses petits.

J'avoue ne pas comprendre cette réticence
franchement je ne comprends vraiment pas

Code :

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

1
2
3
4
<div>
<a href='#' onclick="this.parentNode.style.display='none'; return flase;">close</a>
....
</div>

et tout de même vachement plus simple est compréhensible que

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<script type="application/javascript">
function closeDiv(id) {
  var element = document.getElementById(id);
  if (element) {
    element.parentNode.style.display='none';
  }
  return false;
}
</script>
...
<div id="myDiv">
<a href='#' onclick="return closeDiv('myDiv');">close</a>
....
</div>

franchement lorsqu'on place des éléments dans des attributs et des méthodes portés par les bons éléments du DOM
les scripts fondent comme neige au soleil et ça devient d'une efficacité redoutable

A+JYT