Discussion :

[comode]

Bonjour,

J'effectue un appel ajax qui me retourne en json un tableau d'objets. Pour chaque objet, je veux créer un élément clicable.
en version simplifiée (je vous ai enlevé les objets imbriqués et les attributs pour l'exemple), ça donne :

Code :

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

1
2
3
4
5
6
7
8
9
10
$.Ajax (...)
.done(function(datas) {
   for(var i=0;i<datas.length;i++)
      monJQObj.append("<div />")
                    .text(datas[i].name)
                    .on("click", function(event) {
                                                                alert(function(value){return value;}(i));
                                                          }
                         )
});

Je pensais que ce que j'avais écrit dans mon alert était une closure, qui aurait du me figer la valeur de i au moment de la création des objets, et non de l'execution de l'évenement...

Or, si j'exécute ce code, quelque soit l'élément sur lequel je click, il me m'affiche toujours la même valeur qui correspond au nombre d'élément. J'en déduit donc que ce que j'ai fait n'est pas une closure et qu'il m'affiche la valeur de i au moment du déclenchement de l'évenement, donc lorsque qu'il est sorti de la boucle depuis bien longtemps...

Je ne comprend donc pas... Comment aurais-je du m'y prendre pour créer une closure avec une fonction anonyme ?

En vous remerciant !

[comode]

Je viens d'auto-trouver la solution, en utilisant la même technique, mais sur la fonction parent :

Code :

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

1
2
3
[...].on("click", function(i) {
				return function(){alert(i);}
				} (i));

[danielhagnoul]

Il faut utiliser les attributs data-*, exemple :

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
$( function(){ // forme abrégée de $(document).ready(function(){
 
    var datas = [ "un", "deux", "trois" ],
        jObjParent = $( "article:first" );
 
    $.each( datas, function( i, item ){
 
        $( "<div/>", {
            "text" : item,
            "data-n" : i + 1,
            "click" : function(){
                alert( $( this ).data( "n" ) );
            }
        }).appendTo( jObjParent );
 
    });
 
});

[comode]

Est-ce qu'utiliser les data apporte vraiment quelque chose par rapport à la closure ?

[danielhagnoul]

L'utilisation de la méthode data() est éprouvée, elle est apparue avec la version 1.2.3, voir : http://api.jquery.com/data/.

Au niveau du fonctionnement, de la lourdeur et de la gestion du code, il n'y a ici aucun avantage à utiliser une clôture.

Souvent les développeurs n'utilisent qu'une fraction de l'API, je crois qu'ils se compliquent la vie en négligeant le meilleur des possibilités de jQuery.