valori Passando alla onclick

Question

Se creo un sacco di elementi HTML che utilizzano un ciclo, come

for (i= 1; i < 100; i++) { 
    var my_element = document.createElement ("td"); 
    row.appendChild (my_element); 
    my_element.onclick = function() {my_function (i)); 
} 

poi, quando l'elemento viene cliccato, il valore dei passato a my_function è sempre 100, indipendentemente da quale numero elemento lo sta chiamando Ho lavorato intorno a questo utilizzando

my_element.id = "something"+i; 
my_element.onclick = function (e) {my_function (e.target.id)}; 

(Per Internet Explorer, le target ha bisogno di essere srcElement, a quanto pare.) Sono curioso di sapere se esiste un modo per creare la funzione senza dover aggiungere l'ID l'elemento come questo

Answer 1

Il valore di i cambia con ogni iterazione del ciclo. You need a closure to capture the value of i:

(function(i) { 
    my_element.onclick = function() {my_function (i)}; 
}(i)) 

Answer 2

se fossi in te io utilizzare jQuery (o prototipo o qualsiasi js framework che disponibile)

su ogni elemento si dovrebbe aggiungere attributi come myid ad esempio in modo che quando hai fatto il click è possibile retrive esso.

for(i=1; i ++ ; i<100){ 
    var myelement = "<td myid='something"+i+"' class='myTD'></td>" ; 
    row.append(myelement); 
} 

.... 

$(document).ready(function(){ 
    $('.myTD').click(function(){ 
    var id = $(this).attr('myid'); 
    my_function(id); 
    }); 

}); 

ho fatto questo trucco sul mio web app :)

Answer 3

Se si scrive una funzione che si costruisce una funzione di gestione, è possibile utilizzare la nuova portata che che ti dà per garantire che si ottiene il numero che si desidera. Ad esempio:

function BuildHandler (i) { return function() { alert(i); }; 

for (i= 1; i < 100; i++) { 
    var my_element = document.createElement ("td"); 
    row.appendChild (my_element); 
    my_element.onclick = BuildHandler(i); 
}