'Uncaught SyntaxError: jeton inattendu} lorsque vous essayez d'accéder à une fonction

Question

j'ai une fonction qui remplit plusieurs boutons, chacun avec leur propre fonction onclick:

$("#event_list").append(
      "<button type='button' onClick='showInfo("+i+",'"+name+"')'> Event:<br>"+events_arr[i][2]+"<br> Organizer:<br>"+events_arr[i][1]+"</button>" 
     ); 

La fonction showInfo est définie ailleurs dans le fichier (i est un numéro, le nom est une chaîne)

function showInfo(i, name) 
{ 
    console.log("showInfo works"); 
    //makeTable12(i, name); 
    //makeTable24(i); 
} 

Chaque fois que je clique sur un de ces boutons, Chrome jette un Uncaught SyntaxError: Unexpected token } Je ne peux pas comprendre pourquoi il le fait. Toute aide est appréciée!

Answer 1

Puisque vous enveloppé le contenu onclick avec guillemet simple ' vous devriez envelopper les arguments de la fonction avec des guillemets doubles (mais notez que vous devez leur échapper):

onClick='showInfo("+i+",\""+name+"\")' 

Vérifier l'extrait suivant:

i = 0; 
 
name = 'test'; 
 
events_arr = [['', '', '']]; 
 
$("#event_list").append(
 
    "<button type='button' onClick='showInfo("+i+",\""+name+"\")'> Event:<br>"+events_arr[i][2]+"<br> Organizer:<br>"+events_arr[i][1]+"</button>" 
 
); 
 

 
function showInfo(i, name) 
 
{ 
 
    console.log("showInfo works"); 
 
    //makeTable12(i, name); 
 
    //makeTable24(i); 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="event_list"></div>