Bind des fonctions différentes pour des éléments de li seulement créé

Question

je crée li éléments dynamiquement:

<ul> 
<li id="1">1</li> 
<li id="2">2</li> 
<li id="3">3</li> 
[...] 
</ul> 

li_id est une valeur de tableau qui retourne id li (= 1,2,3 ...)

Comment Je lie différentes fonctions à chaque élément li dans le code comme ceci:

for (li_id in lids) 
{ 
console.log(li_id);       
$(li_id).bind('mouseover', function() { 
console.log(li_id); 
}); 
} 

La précède ne fonctionne pas. Comment l'écrire correctement?

Avec live() au lieu de bind() il montre l'identifiant du dernier élément du tableau lids, pas 1,2,3 ... [...], comme le console.log() en dehors de la déclaration $ ...

Answer 1

http://www.mennovanslooten.nl/blog/post/62

ou

JavaScript closure inside loops – simple practical example

Compte tenu de votre HTML, le code peut être écrit de deux façons.

En utilisant jQuery 1.4 Event.data paramètre:

var lids = [1,2,3]; 
for (i in lids) { 
    var li_id = lids[i]; 

    $('#' + li_id).bind('mouseover', { id: li_id }, function(ev) { 
     console.log(ev.data.id); 
    }); 
} 

Ou, créant ainsi une fermeture avec fonction anonyme:

var lids = [1,2,3]; 
for (i in lids) { 
    var li_id = lids[i]; 

    // an anonymous function 
    (function (id) { 
     $('#' + id).bind('mouseover', function() { 
      console.log(id); 
     });   
    })(li_id); // ...called every time with different id 

} 

Je préfère jQuery Event.data façon dans ce cas.

Answer 2

Donc, avec la fermeture de la bonne réponse est:

$(li_id).bind('mouseover', function(val) { 
          return function() { 
           console.log(val); 
          } 
          }(li_id)); 

Mais cela est nécessaire uniquement si vous devez passer la valeur de la boucle dans la fonction.