Проблемы с содержимым .append(), содержащим кавычки и точки

Question

Я хочу добавить HTML-код в таблицу, используя .append(SOMET HTML CODE).

В моем <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. Использование атрибута onClickis not good practice. Вы должны рассмотреть возможность установки обработчика события .click() с помощью jQuery.

   Поскольку данные добавлены динамически, вам придется делегировать click событие на столе с помощью .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 ... 
   }); 
   

   Тогда ваш 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');