引用符とドットを含む.append（）コンテンツの問題

Question

.append(SOMET HTML CODE)を使用してテーブルにHTMLコードを追加したいとします。

私の<tr>onclick()イベントを実装したいのですが、関数を呼び出すのですが、コンテンツがサッカー選手の名前であり、この名前に含まれているので、引用符とコンテンツには問題があるようです以下のようなドット：M**.** Neuer）

マイjQueryのは次のようになります。

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

と私のHTMLルックス本当に奇妙その後、

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

、これがクラッシュしている部分である。

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

私が正しく私のjqueryの一部を変更する必要がどのように？

Answer 1

HTML文字列には、二重引用符で囲んだ二重引用符が含まれています。 あなたは、単一引用符を使用しており、それらをエスケープ：サイドノートで

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

---

：

1. costsForThisPlayerはvalid HTML attributeではありません。 data-*属性を使用してカスタム値を格納します。

2. onClick属性is not good practiceを使用します。 jQueryを使用して.click()イベントハンドラを設定することを検討する必要があります。

   あなたのコンテンツが動的に追加されているので、あなたが.on()を使用してテーブルの上にclickイベントを委任する必要があります：

   $('.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 ... 
   }); 
   

   その後、あなたのHTML作成部は、次のようになります。

   $('<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');