jQuery on click argument dodany do funkcji jest błędny

Question

Chcę dodać funkcję przyjmującą 1 argument dla każdego elementu, robię to w pętli for, funkcja na zdarzenie on click jest faktycznie podpięta ale argument jest błędny. 

for( i=0; i< 10;i++)
{
    $('#c'+i).on("click", function() {mojafunkcja(i); } );
}
function mojafunkcja(nr)
{
    var nr=nr;
 }

Numer jaki wchodzi do funkcji nie ważne na który element kliknę zawsze jest 10. Nie rozumiem tego, dlaczego nie przypisuje prawidłowego argumentu dla 0 ->0 dla 1->1 itp. Jak przechodzę przez for to wszystko się zgadza, klikam na element i jest nr=10. Tak jakby brał ostatnią wartość "i".

Comments

Może spróbuj z each()

 

przykład

$('[id^=c]').each(function(index) {
  $('#c'+index).on("click", function() { mojafunkcja(index); } );
});
function mojafunkcja(nr)
{
  var nr=nr;
  console.log(nr);
}

 

[ CSS Selectors ]

Answer 1

To chyba klasyczny przykład z asynchronicznym kodem w pętli, gdy używa się scope'u nie-blokowego. Zanim wykona się Twój kod, to pętla zdąży się wykonać w całości, więc i będzie mieć wartość z ostatniej iteracji.

Zadeklaruj zmienną i słówkiem let lub owiń podpięcie click handlera w IIFE, co pozwoli domknąć scope dla zmiennej i - wtedy przy obsłudze eventu i będzie mieć wartość z iteracji, w której handler został podpięty.