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

Posted 2023-02-24

【中文标题】.append() 包含引号和点的内容的问题

【英文标题】：Problems with .append() content containing quotes and dots

【发布时间】：2017-03-12 16:07:32

【问题描述】：

我想使用.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 部分？

【问题讨论】：

通过前缀 \.

转义有问题的引号

【参考方案1】：

您的 HTML 字符串在双引号内包含双引号。 您已使用单引号并将其转义：

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

---

附注：

costsForThisPlayer 不是 valid HTML attribute。使用data-* 属性存储自定义值。

使用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');

【讨论】：

我建议使用语法`text $string`以便于阅读。

感谢您的帮助，感谢您的额外说明，但我要调用的函数是基于数据库中的值，这就是为什么我在 HTML 部分使用 onClick() 尝试它的原因...（我希望我描述得足够好，呵呵）

@nbg15，那为什么不使用data-* 属性来存储每个元素的数据库值呢？