jquery（ajax）中的JS变量附加html标签

Question

编辑（完成）：我想通了。语法是<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 添加到按钮中为 data-attributes 并使用 delegated event handler 来处理点击

// 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 })
      ])
    ])
  )))