.append() 内容包含引号和点的问题
Problems with .append() content containing quotes and dots
我想使用 .append(SOMET HTML CODE)
将 HTML 代码添加到 table。
进入我的 <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);\'...'
旁注:
costsForThisPlayer
不是用于存储自定义值的 valid HTML attribute. Use data-*
属性。
使用 onClick
属性 is not good practice。您应该考虑使用 jQuery.
设置 .click()
事件处理程序
由于您的内容是动态添加的,因此您必须使用 .on()
:
在 table 上委托 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');
我想使用 .append(SOMET HTML CODE)
将 HTML 代码添加到 table。
进入我的 <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);\'...'
旁注:
costsForThisPlayer
不是用于存储自定义值的 valid HTML attribute. Usedata-*
属性。使用
设置onClick
属性 is not good practice。您应该考虑使用 jQuery..click()
事件处理程序由于您的内容是动态添加的,因此您必须使用
在 table 上委托.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');