Mam kod tworzący w pętli setkę divów, każdemu przypisuje zdarzenie onClick.
Niby każdemu z nich powinna się wywołać fumkcja test1 z innym parametrem, ale w praktyce klikając na każdy wywołuje się funkcja przypisana do ostatniego.

[HTML] pobierz, plaintext 
$( function(){
 
      for ( var i=0; i < 100; i++ ){
          var nowydiv =  $('<div>' + i + '</div>'); //utworzenie diva
          nowydiv.click( function(){ test1( i ) } ); //przypisanie mu funkcji z parametrem
          $('body').append( nowydiv ); //dodanie go do dokumentu
      }      
 });
 
function test1( param ){
  alert(param);
}
[HTML] pobierz, plaintext 

Dlaczego tak się dzieje i jak zrobić, by każdemu divowi był podawany onClick z innym parametrem?

dodaj jakąś klasę do swoich divów, np

[JAVASCRIPT] pobierz, plaintext 
var nowydiv =  $('<div class="foo">' + i + '</div>');
[JAVASCRIPT] pobierz, plaintext 

usun swoją 5 linijkę, bo jest ona strasznie nie na miejscu.

[JAVASCRIPT] pobierz, plaintext 
A zamiast tego pod spodem wrzuć:
$('div.foo').click( function() {
  var argument = $(this).text();
  test1( argument );
}); 
[JAVASCRIPT] pobierz, plaintext 

Poniższe moze zawierać błędy bo pisałem na bieżąco, ale idea jest taka jak przedstawiłem

Dlatego, że zmienne bindowane są w momencie użycia, a nie deklaracji.
Masz nawyk myślenia z języków kompilowalnych.
Przeczytaj wątek: http://forum.php.pl/index.php?showtopic=116641
Pozdrawiam.

Słusznie, dzięki za pomoc.
Poczytałem nieco o działaniu domknięć
http://www.jibbering.com/faq/faq_notes/closures.html
i było warto.

By dopełnić wątek, skrypt poprawiony

[HTML] pobierz, plaintext 
 
 
$( function(){         
 
      for ( var i=0; i < 100; i++ ){
          var nowydiv =  $('<div>' + i + '</div>'); //utworzenie diva, to i jest jedynie do identyfikacji, docelowo będzie tu jakiś tekst
          nowydiv.click(  test1 ); //przypisanie mu nazwy funkcji globalnej  obsługującej zdarzenie
          nowydiv.data( 'numer', i ); //przypisanie mu obiektu data jquery z adekwatną wartością
          $('body').append( nowydiv ); //dodanie go do dokumentu
      }      
 });
 
 
function test1(e){
  alert ( $(this).data('numer') ); //nasza dana i jest chowana w obiekcie
}
 
 
[HTML] pobierz, plaintext 

Witajcie, dzisiaj i mnie przyszło walczyć z tym problemem o szukać odpowiedzi. Mimo że pracuję z JS już od lat to dałem się złapać w tę pułapkę. A jaki mi się zdarza coś takiego to lubię to "zgłębić dogłębnie"

Przy okazji zaprezentuję inne rozwiązanie problemu niż bindowanie zmiennej do propertisu obiektu, gdyż w moim przypadku nie chodzi o event handler i nie ma żadnego obiektu. W moim konkretnym przypadku akurat odraczam wykonywanie pewnych czynności na czas po wykonaniu innych czynności (za pomocą domknięć), ale żeby nie komplikować można takie odroczenie zaprezentować za pomocą timeoutu.

Kod bazowy który nie działa:

[PHP] pobierz, plaintext 
var o = {one: 1, two: 2, three: 3};
 
var myfunc = function(p) {
	alert(p);
}
 
var i = 500;
for (n in o) {
  setTimeout(function() {myfunc(n)}, i);
  i+=500;
}
[PHP] pobierz, plaintext 

Wydawało by się że dostaniemy trzy alerty: "one", "two", "three"; a dostajemy trzy alerty "three".

Teraz poprawka, która "naprawia" kod u góry:

[PHP] pobierz, plaintext 
for (n in o) {
  function makeClosure(m) {
  	setTimeout(function() {myfunc(m)}, i);
  };
  makeClosure(n);
  i+=500;
}
[PHP] pobierz, plaintext 

Czyli sposób rozwiązania problemu - owinąć nasz kod korzystający ze zmiennej w pętli w inną funkcję.

I teraz pytanko, korro napisał "Dlatego, że zmienne bindowane są w momencie użycia, a nie deklaracji. " co nie do końca rozumiem. Oto jak rozumiem ten problem:

1. pętla nie tworzy nowego scope zatem w momencie tworzenia funkcji anonimowej w timeoucie wykorzystywany jest bieżący scope na którym leży nasza zmienna "n"
2. przy każdym wywołaniu funkcji, korzystamy z naszego scopu ze zmienną "n" która wskazuje na ostatnią wartość "n" dlatego, że nie nigdy był stworzony nowy obiekt scope, tylko aktualizowany bieżący scope aktualną wartością "n"
3. dodanie funkcji owijającej nasz wrażliwy kod spowodowało stworzenie nowego scope dla każdego wywołania funkcji anonimowej, skąd dostępna jest nowa zmienna "m"

Jeśli tak jest, to błąd myślowy jaki popełniłem tutaj jest taki, że założyłem że nowy scope chain tworzony jest w momencie tworzenia nowej funkcji (w sensie stworzenia wszystkich obiektów w chainie), natomiast w rzeczywistości w kontekście wyżej istnieje już nadrzędny scope chain który jest wykorzystany dla kontekstu nowej funkcji (w sensie wykorzystania tych samych instancji scope) i tylko dodawana jest do niego nowo tworzona instacja scope dla nowego kontekstu.

Czy tak jest w rzeczywistości?

w 90% masz, ale tylko w 90%...

pomijając fakt, iż wywołanie anonimowej funkcji nie działało i chyba dalej nie działa w IE to najważniejszy tutaj jest fakt, iż funkcja w JS w zależności od sposobu użycia jest albo obiektem albo zwykłą funkcją - jeśli zrobi się tak, że jest zwykłą funkcją to korzysta z aktualnej wartości zmiennej... jeśli zrobić tak, bu funkcja była obiektem to jako parametr podpina się inne zmienne pod setTimeoute/setInterval gdyż podaje się inny obiekt z innymi zmiennymi prywatnymi [zmienne w nawiasach funkcji są prywatne tak jakbyś w ciele funkcji przed zmienną napisał var - jeśli nie napiszesz var zmienna londuje w obiekcie window...]

tutaj podam 2 rozwiązania - jedno niemal Twoje, jednak funkcja nie powinna być deklarowana co przebieg pętli to przedewszystkim i drugi ważny argument to taki, by nie podawać funkcji anonimowej jako parametr setTimeout/setInterval...

w pasku przeglądarki wklei i kliknij enter [javascript ma być razem!! - tutaj na forum zawsze rozdziela]:

[JAVASCRIPT] pobierz, plaintext 
java script:
    var o = {one: 1, two: 2, three: 3};
var myfunc = function(p) {
    alert(p);
}
var i = 500;
var opakowanie = function(p, i){
    var prywatna_metoda = function (){
        myfunc(p);
    };
    setTimeout(prywatna_metoda, i);
};
for (n in o) {
    opakowanie(n, i); /* opakowanie tutaj staje się obiektem */
    i+=500;
}; void(0);
[JAVASCRIPT] pobierz, plaintext 

powyższe to niemal Twoje rozwiązanie jednak poprawione tak jak trzeba... a poniżej jeśli wolisz inaczej pisać... :

[JAVASCRIPT] pobierz, plaintext 
java script:
    var o = {one: 1, two: 2, three: 3};
var myfunc = function(p) {
    this.alarm=function(){
        alert(p);}
}
var i = 500;
var temp;
for (n in o) {
    temp = new myfunc(n);
    setTimeout(temp.alarm, i);
    i+=500;
}; void(0);
[JAVASCRIPT] pobierz, plaintext 

PS.
a propo bindowania to mi się kojarzy bardziej z podpinaniem referencji - gdzie zmienna jest użyta dopiero gdy potrzebna

Dziękuję za tę odpowiedź, zmusiła mnie do zastanowienia się nad jeszcze kilkoma aspektami. Każde z tych rozwiązań różni się nieco i warto sobie je przeanalizować, jednak "general concept" pozostaje taki sam jak mi się wydaje - czyli trzeba powołać nowy scope, powołując nową funkcję, na który trzeba jeszcze raz odłożyć ten parametr.

Faktycznie lepiej było wykorzystać funkcję utworzoną przed pętlą, zamiast tworzyć w pętli za każdym razem nową. Jednak w IE działa bez problemu.

Z drugiej strony - zastanawiałem się jeszcze czy funkcja deklarowana przez var param=... czy tylko przez function() tutaj ma znaczenie, ale chyba nie, bo scope dla tych funkcji jest taki sam, różni się to tylko momentem utworzenia obiektu funkcji.

Dlaczego piszesz żeby nie podawać funkcji anonimowej dla setTimeout?

skoro działa na IE (niestety na tym laptopie nie mam pod ręką) to mój błąd za co przepraszam - nie wiem skąd ale jakoś mi w pamięci mi utkwiło, że anonimowa funkcja w IE nie działa...