Problèmes avec le contenu .append() contenant des guillemets et des points

Question

Je veux ajouter un code HTML à une table en utilisant .append(SOMET HTML CODE). Je souhaite implémenter un événement - qui appelle une fonction -, MAIS il semble qu'il y ait des problèmes avec les guillemets ET avec le contenu lui-même (parce que le contenu est un nom de joueur de football et ce nom contient un point comme: M**.** Neuer)

Mon jQuery ressemble à ceci:

$('.player_table').append('<tr id="'+pos+players.id+'" costsForThisPlayer="12.2" class="goalKepperRow" onclick="addGoalkeeperByClickEvent("'+players.name+'", "gk1", 12.2)><td>something</td></tr>'); 

et mes HTML regards vraiment étrange alors

<tr id="gk149" costsforthisplayer="12.2" class="goalKepperRow" onclick="addGoalkeeperByClickEvent(" m.hitz",="" "gk1",="" 12.2)=""><td>something</td></tr> 

et ceci est la partie où est écrasé:

onclick="addGoalkeeperByClickEvent(" m.hitz",="" "gk1",="" 12.2)=""> 

comment je dois changer ma part jquery correctement?

Answer 1

Votre chaîne HTML contient des guillemets entre guillemets. Vous avez utiliser des guillemets simples et les échapper:

'... onclick="addGoalkeeperByClickEvent(\''+players.name+'\', \'gk1\', 12.2)"...' 
// or: 
'... onclick=\'addGoalkeeperByClickEvent("'+players.name+'", "gk1", 12.2);\'...' 

---

Sur une note latérale:

1. costsForThisPlayer est pas un valid HTML attribute. Utilisez les attributs data-* pour stocker des valeurs personnalisées.

2. En utilisant un attribut onClickis not good practice. Vous devriez envisager de définir un gestionnaire d'événements .click() avec jQuery.

   Depuis est ajouté dynamiquement votre contenu, vous devez déléguer événement click sur la table à l'aide .on():

   $('.player_table').on('click', `.goalKepperRow`, function(){ 
       var costsForThisPlayer = $(this).attr('data-costsForThisPlayer'); 
       var playerName = $(this).attr('data-name'); 
       var something = $(this).attr('data-something'); 
       // all the values that you're passing to the onClick function are here 
       // ... the rest of your addGoalkeeperByClickEvent() method ... 
   }); 
   

   Ensuite, votre partie de création HTML serait:

   $('<tr/>').attr({ 
       'id'      : pos+players.id, 
       'class'     : "goalKepperRow", 
       'data-costsForThisPlayer' : "12.2", 
       'data-name'    : players.name, 
       'data-something'   : "gk1" 
   }) 
   .append('<td>something</td>') 
   .appendTo('.player_table');