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

Problems with .append() content containing quotes and dots

提问人:WEBGONDEL UG 提问时间:10/30/2016 最后编辑:Artur FilipiakWEBGONDEL UG 更新时间:10/31/2016 访问量:402

问:

我想使用 ..append(SOMET HTML CODE)

进入我的我想实现一个事件 - 它调用一个函数 - 但是引号和内容本身似乎存在一些问题(因为内容是足球运动员的名字,而这个名字包含一个点,例如:M**。<tr>onclick())

我的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部分?

JavaScript jQuery HTML 行情

评论

0赞 connexo 10/30/2016
通过前缀 \ 转义有问题的引号。

答:

4赞 Artur Filipiak 10/30/2016 #1

HTML 字符串在双引号内包含双引号。 您使用了单引号并转义了它们:

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

附带说明:

  1. costsForThisPlayer不是有效的 HTML 属性。使用 data-* 属性存储自定义值。
  2. 使用属性不是好做法。您应该考虑使用 jQuery 设置事件处理程序。onClick.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');
    

评论

0赞 Tân 10/30/2016
我建议使用语法“text ${string}”以便于阅读。
0赞 WEBGONDEL UG 10/30/2016
谢谢你的帮助,谢谢你的额外旁注,但是我想调用的函数是基于数据库中的值,这就是为什么我在 HTML 部分尝试使用 onClick() 的原因......(我希望我描述得足够好,呵呵)
0赞 Artur Filipiak 10/30/2016
@nbg15,那么为什么不使用属性来存储每个元素的数据库值呢?data-*