.append()内容包含引号和点的问题

Problems with .append() content containing quotes and dots

本文关键字：问题 包含引 append      更新时间：2023-09-26

我想使用.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部分正确?

你的HTML字符串包含双引号中的双引号。您必须使用单引号并转义它们:

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

边注:

  1. costsForThisPlayer不是一个有效的HTML属性。使用 data-* 属性存储自定义值。

  2. 使用onClick属性不是好的做法。你应该考虑用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');
相关文章：