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

<div id="c0">--c0--</div>
<div id="c1">--c1--</div>
<div id="c2">--c2--</div>
<div id="c3">--c3--</div>
<div id="c4">--c4--</div>
<div id="c5">--c5--</div>

<style>
  div { margin: 1em; }
</style>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

$('[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.