jquery（ajax）中的JS變量附加html標簽

Question

編輯（完成） ：我想通了。 語法是<button onclick="editItem('+data[i].id+')">EDIT</button>'

我有這個，它會生成數據庫中的所有對象，顯示id 、 name和actions - 兩個按鈕都有不同onclick function我想發送object id for future things.

我只需要一個答案如何將data[i].id in '<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 })
      ])
    ])
  )))