boutons html dynamiques dans le code javascript

Question

Donc j'utilise javascript, jQuery et HTML ici. Fondamentalement, j'ai un nombre dynamique de boutons qui sont en cours de création, et chaque appel d'une fonction en utilisant des variables uniques. Les variables sont conservées dans une variable json. Voici le code tel qu'il est:

var box = "<font size=\"2\">The following assassins are in your current location:<br/><table width = \"100%\">"; 

    for (var i=0; i<info.length; i++) { 
     if(userid != info[i].playerid){ 
      box += "<tr><td>"+info[i].name+" | rank: "+info[i].rank+"</td><td align=\"right\"><input id='attack' type='button' onclick='loadAttack(userid, info[i].playerid, info[i].name, info[i].rank, location)' value='Attack'/></td></tr>"; 
     }  
    } 
    box += "</table></font>"; 

    $("#assassinBox").html(box);   

La boîte semble bien, avec les noms propres, des rangs et des boutons. Le problème est quand un bouton est poussé, info est indéfini. Je pense que c'est parce que le bouton n'a pas sa propre copie, et est hors des limites du tableau à la fin de la boucle. Je me bats pour penser à une solution, un moyen de passer la fonction onclick une variable unique?

Merci!

Answer 1

box += "<tr><td>"+info[i].name+" | rank: "+info[i].rank+"</td><td align=\"right\"><input id='attack' type='button' onclick='loadAttack(userid, info["+i+"].playerid, info["+i+"].name, info["+i+"].rank, location)' value='Attack'/></td></tr>"; 

Cela devrait fonctionner. Bien que si j'étais vous je considérerais réécrire pour ne pas utiliser les gestionnaires d'événements en ligne et peut-être construire le HTML avec jQuery ou les méthodes de création DOMElement natives plutôt que de concaténer des chaînes de HTML. Cela le rend beaucoup plus facile à maintenir à long terme.