Problème avec jQuery appeler dynamiquement les fonctions

Question

for(n=0;n < 20;n++){ 
    $('#button' + n).click(function() { newAction(n); }); 
} 

function newAction(x){ 
    alert(x); 
} 

Le problème avec ce code est que lorsque je en quelque sorte appuyer sur les boutons de leurs actions de clic ne sont pas liés à leur nombre, donc en appuyant sur button5 je peux obtenir alerte à 6 ou quelque chose comme ça.

Answer 1

les opérations suivantes:

for(n=0;n < 20;n++){ 
    $('#button' + n).click(function (n) { newAction(n); }); 
} 

function newAction(x){ 
    alert(x); 
} 

La raison en est la fermeture. Lorsque vous ne passez pas le n avec la fonction anonyme, javascript recherche la variable dans sa propre portée et la portée parent. La portée parent a un 'n', mais ce n est la valeur du n après la boucle for. En passant le n, vous créez un nouveau n dans la portée de la fonction, et celui-ci n'est pas changé lorsque la boucle for s'exécute.

Answer 2

je peux penser à des façons plus faciles à faire ce que vous essayez, mais cela va travailler pour vous:

EDIT: Désolé je pensais qu'il était clair que j'approvisionnait un remplacement de la ligne dans votre boucle. Voici le programme de fonctionnement complet

EDIT 2: Ok, voici l'enveloppe externe $ (document) .ready() qui n'est même pas dans la question d'origine. Cela a été testé. cela marche. Même sur 1.3+ .. C'est la meilleure réponse donnée.

J'ai mis en place une version fonctionnelle de ce programme, vous pouvez essayer par visiting here

$(function() { 
    for (n = 0; n < 20; n++){ 
    $('#button' + n).bind('click', n, function (e) { newAction(e.data); }); 
    } 

}); 

function newAction(x){ 
    alert(x); 
} 

Answer 3

Cela semble étrange façon, mais ce serait plus approprié pour créer la fermeture afin que vous puissiez accéder à la boucle de portée variable par itération ...

for(var n = 0; n < 20; n++) { 
    $('#button' + n).click((function(i) { 
     return function(e) { newAction(i) } 
    })(n)); 
    } 

    function newAction(x){ 
    alert(x); 
    } 

Answer 4

Mr Lucky est sur la bonne voie, mais son exemple, je trouve un peu difficile à lire.

function button_bind(num){ 
    $("#button" + num).click(function(){ 
     newAction(num); 
    }); 
} 

for(var n = 0; n < 20; n++) { 
    button_bind(n); 
} 

function newAction(x){ 
    alert(x); 
} 

Ceci devrait éclaircir votre problème de portée.

Le pourrait être transformé ci-dessus inline:

for(var n = 0; n < 20; n++) { 

    (function(num){ 

     $("#button" + num).click(function(){ 
     newAction(num); 
     }); 

    })(n); 

} 

function newAction(x){ 
    alert(x); 
}