JS变量在jquery(ajax)附加html标签

Question

EDIT (done)我明白了。语法为<button onclick="editItem('+data[i].id+')">EDIT</button>'

我有这个，它生成数据库中的所有对象，显示id,name和actions-两个按钮都有不同的onclick function，我想发送object id用于未来的事情。

我只需要一个答案如何把data[i].id在'<button onclick="editItem(ID)">EDIT</button>'，哪个语法?

$.ajax(
{
type:'GET',
url:'api',
dataType: 'json',
success: function(data){
console.log(data);
for (var i=0; i<data.length; i++) {
var row = $(
'<tr>' +
'<td>' +
data[i].id +
'</td>' +
'<td>' +
data[i].name +
'</td>' +
'<td>' +
'   <button onclick="editItem(ID)">EDIT</button>' +
'   <button onclick="deleteItem(ID)">DELETE</button>' +
'</td>' +
'</tr>'
);
$('#my_table').append(row);
}
}
}
);

Answer 1

我更倾向于将ID添加到按钮作为数据属性，并使用委托事件处理程序来处理单击

// Set up event handlers on your table to listen for button clicks
const table = $("#my_table")
.on("click", "button[data-edit]", function(e) { // EDIT button
const id = this.dataset.edit
// and so on, eg...
editItem(id)
})
.on("click", "button[data-delete]", function(e) { // DELETE button
const id = this.dataset.delete
// and so on, eg... 
deleteItem(id)
})

// Using jQuery's DOM helpers makes for more concise code IMO
$.getJSON("api")
.done(data => table.append(data.map(({ id, name }) =>
$("<tr>").append([
$("<td>", { text: id }),
$("<td>", { text: name }),
$("<td>").append([
$("<button>", { text: "EDIT", "data-edit": id }),
$("<button>", { text: "DELETE", "data-delete": id })
])
])
)))