[jquery] assegnazione evento click dinamicamente, all'interno di un ciclo each

[masdel1979]

Salve a tutti,
come prima cosa mi voglio scusare per il titolo che ho dato a questo post, ma é complicato spiegare il problema a parole, meglio andare per esempi.

Uso ormai jquery (fantastico) da parecchio tempo e se c'é una cosa che mi da sempre problemi, é l'assegnazione di un evento, all'interno di un ciclo each...

Mi spiego meglio...

ho per esempio n link con una class assegnata "test":

<a class="test">link</a> 
<a class="test">link</a> 
<a class="test">link</a> 
<a class="test">link</a>

vorrei assegnare un evento click ad ogni link, per esempio, il codice javascript é il seguente:

var conta = 0;

link = $(".test");
$.each(link, function(){
  $(this).click(function(){
    alert(conta);
  });
  conta++;
});

il risultato é sempre 4... praticamente 'this' non si riferisce solo all'elemento che sto ciclando ma a tutti, ed é come se sovrascrive l'ultimo evento a tutti i link...

Vorrei capire come perché accade questo, teoricamente 'this' dovrebbe riferirsi all'elemento n di un ciclo, ma non mi sembra che sia cosí, alemno questo accade quando assegno degli eventi.

Premetto che il problema l'ho comunque risolto ma assegnando dinamicamente un id ad ogni link (quindi evitando di usare 'this'), ma mi sembra macchinoso come sistema.

Ciao e grazie, MAX

[Vindav]

il tuo ragionamento è completamento sbagliato, this si riferisce esattamente all'elemento che si sta ciclando, il problema è un altro e mi sembra piuttosto evidente.

Il codice che definisci nella funzione dell'evento click, non viene eseguito durante il ciclo ma viene eseguito quando l'evento click viene scatenato, con questa premessa dovrebbe esserti chiaro perche il risultato dell'alert è sempre 4.

[masdel1979]

Ciao Vindav,
grazie per la risposta, ma non mi sembra esattamente cosi'.. ti riporto allora un caso leggermente piu' complesso

   <a class="test" rel="1">link</a>
 
   <a class="test" rel="2">link</a>
 
   <a class="test" rel="3">link</a>
 
   <a class="test" rel="4">link</a>

    link = $(".test");
    $.each(link, function(){
      rel = $(this).attr("rel");
      $(this).click(function(){
        test(rel);
      });
    }); 
    
    function test(rel){
      alert(rel);
    }

il risultato e' sempre 4 e non mi sembra corretto, allora non ho la possibilita di assegnare eventi dinamicamente.

Tu come risolveresti? Mi posti un codice di esempio? Cosi' almeno capisco bene..

Ciao e grazie MAX

[masdel1979]

Originariamente inviato da masdel1979
Ciao Vindav,
grazie per la risposta, ma non mi sembra esattamente cosi'.. ti riporto allora un caso leggermente piu' complesso

   <a class="test" rel="1">link</a>
 
   <a class="test" rel="2">link</a>
 
   <a class="test" rel="3">link</a>
 
   <a class="test" rel="4">link</a>

    link = $(".test");
    $.each(link, function(){
      rel = $(this).attr("rel");
      $(this).click(function(){
        test(rel);
      });
    }); 
    
    function test(rel){
      alert(rel);
    }

il risultato e' sempre 4 e non mi sembra corretto, allora non ho la possibilita di assegnare eventi dinamicamente.

Tu come risolveresti? Mi posti un codice di esempio? Cosi' almeno capisco bene..

Ciao e grazie MAX

Dimenticavo,
con questo esempio che ti posto adesso funziona, che praticamente mi sembra la stessa cosa, invece di assegnare l'attributo rel alla variabile, lo passo direttamente, ma a me sembra piu' un bug che altro:

    link = $(".test");
    $.each(link, function(){
      $(this).click(function(){
        test($(this).attr("rel"));
      });
    }); 
    
    function test(rel){
      alert(rel);
    }

Ciao MAX

[Vindav]

stai ricadendo sempre nello stesso identico errore... ripeto tutto quello che sta dentro la funzione $(this).click(function(){ viene eseguito solo quando l'evento associato viene invocato, tutto quello che sta fuori dalla funzione viene invece eseguito durante il ciclo, quindi quanto vale la variabile rel alla fine del ciclo? 4

link = $(".test");
    $.each(link, function(){
      rel = $(this).attr("rel"); //valorizzo la variabile rel
      $(this).click(function(){ //definisco la funzione
        test(rel); <--qui non ci entra, questa riga di codice viene eseguita quando l'evento click viene invocato e in quel momento il ciclo è terminato e rel vale 4
      });
    }); 
    //il ciclo è terminato la variabile rel, nell'utlimo ciclo è stata valorizzata a 4
    function test(rel){
      alert(rel); //stampo a video sempre 4
    }

La soluzione è questa:

link = $(".test");
    $.each(link, function(){
      $(this).click(function(){
        test($(this).attr("rel"););
      });
    }); 
    
    function test(rel){
      alert(rel);
    }

Il tuo ragionamento dimostra qualche lacuna in fatto di logica di programmazione. Non c'è assolutamente nessun bug.

[masdel1979]

Ti ringrazio ancora per la spiegazione, chiaro il concetto, ma dire che:

"Il tuo ragionamento dimostra qualche lacuna in fatto di logica di programmazione"

mi sembra eccessivo..

Considera che jquery é un framework basato su javascript e non un Linguaggio di programmazione (come dici tu).

Semmai il linguaggio di programmazione é javascript stesso (lato client e ho detto tutto).

jquery ha una sua logica, forse qui sono carente.

Ciao MAX

[Vindav]

vedila come preferisci,ma purtroppo ti sbagli, è un errore che non dipende da jquery , lo stesso errore puo avvenire anche se usi javascript:

for(i=0;i<array.length;i++){
rel = array[i].rel;
array[i].addEventListener('click',function(){
test(rel);
});
}
                          
function test(rel){
   alert(rel);
}

Ci tengo a precisare una cosa, non mi permetto certo di giudicarti, alla maggior parte degli utenti che scrivono qui non gliene può fregar di meno se hanno lacune nel linguaggio o nella logica, a loro interessa risolvere il loro problema, e in fondo è anche giusto cosi visto che non lo fanno certo per lavoro e magari sarà la prima e l'ultima volta che mettono mani al codice. Quindi prendilo solo come consiglio... sopratutto se la programmazione è il tuo campo, auguri

[fcaldera]

Originariamente inviato da masdel1979
Ciao Vindav,
grazie per la risposta, ma non mi sembra esattamente cosi'.

invece è esattamente così.
Quello che non ti è chiaro è che tu chiedi il valore di una variabile definita nello scope esterno - rispetto a quello dell'handler dell'evento - in cui il valore ha già raggiunto 4 quando clicchi.

Tecnicamente dentro quel ciclo, creando quell'annidamento di scope, hai generato ciò che viene definito come una closure e non è strettamente collegato a jQuery: è una caratteristica intrinseca di javascript

[masdel1979]

Si siamo daccordo, a me il motivo per cui succede questo adesso mi é chiaro (grazie alle spiegazioni di Vindav), peró é proprio concettualmente (come ragiona Javascript) che mi sembrava strano e che non riuscivo a capire..

Pensavo che l'evento fosse attribuito durante il ciclo e non alla fine, del tipo:

conta = 0 => assegna subito l'evento onclick = alert(0) all'oggetto 1
conta = 1 => assegna subito l'evento onclick = alert(1) all'oggetto 2
conta = 2 => assegna subito l'evento onclick = alert(2) all'oggetto 3
conta = 3 => assegna subito l'evento onclick = alert(3) all'oggetto 4

comunque grazie, mi sono (s)chiarito un pó le idee, ciao MAX