拼接 JSON 數組 JavaScript

Question

我創建了一個函數來重用 javascript 數組的拼接功能，但是，在我運行一次后，它不能被重用。

var removePerson = function(d, person_id) { 
  var person_index = d.findIndex(i => i.id == person_id);
  d.splice(person_index, 1);
  return d;
};

我沒有收到控制台錯誤。 我不知道如何調試它。 這是我的JSFiddle 。

如果您運行該示例，您將看到您可以從列表中刪除任何 1 個人，但是當您嘗試刪除其余 2 個人中的任何一個時，沒有任何反應（例如控制台錯誤、控制台響應）。 知道如何支持重用removePerson()函數嗎？

Answer 1

由於您的populateList工作方式，您的解決方案不起作用。

在您的populateList ，您有一行：

$('#load').empty();

此行清空表並刪除附有click事件偵聽器的按鈕。

然后，您添加全新的button.delete ，它沒有附加任何事件偵聽器。

要解決此問題，您可以將.on()放入populateList函數中。

var populateList = function(d) {
    $("#load").empty();
    var new_rows;
    for(var i = 0; i < d.length; i++) {
        new_rows += "<tr>" + 
            "<td>" + d[i].id + "</td>" +
            "<td>" + d[i].name + "</td>" +
            "<td>" + d[i].phone + "</td>" +
            "<td><button class='delete' data-id='" + d[i].id + "'>delete</button></td>" +
            "</tr>";
    }
    $("#load").append(new_rows);

    // delete event
    $(".delete").on("click", function() {
      var delete_sel = $(this).attr("data-id");
      populateList(removePerson(d, delete_sel));
    });
};

這是一個有效的jsFiddle 。

或者，您可以使用此答案中的解決方案（這是一個更清潔的解決方案imo）。

$("table").on("click",".delete", function() {
  var delete_sel = $(this).attr("data-id");
  populateList(removePerson(data, delete_sel));
});

關於為什么他的答案適用於jQuery 文檔的更多解釋（查看selector參數）。

Answer 2

試試這個代碼： JSFiddle

或代碼片段：

 var removePerson = function(d, person_id) { var person_index = d.findIndex(i => i.id == person_id); d.splice(person_index, 1); return d; }; var populateList = function(d) { $("#load").empty(); var new_rows; for(var i = 0; i < d.length; i++) { new_rows += "<tr>" + "<td>" + d[i].id + "</td>" + "<td>" + d[i].name + "</td>" + "<td>" + d[i].phone + "</td>" + "<td><button class='delete' data-id='" + d[i].id + "'>delete</button></td>" + "</tr>"; } $("#load").append(new_rows); }; $(document).ready( function() { // initial list var data = [ { "id": 1001, "name": "Andy Roy", "phone": "555-555-5551" }, { "id": 1002, "name": "Bob Dillon", "phone": "555-555-5552" }, { "id": 1003, "name": "Carl Sagan", "phone": "555-555-5553" } ]; //initial populate list populateList(data); // delete event $("table").on("click",".delete", function() { var delete_sel = $(this).attr("data-id"); populateList(removePerson(data, delete_sel)); }); });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <table border> <thead> <tr><th>ID</th><th>Name</th><th>Phone</th></tr> </thead> <tbody id="load"></tbody> </table>

---

 $("table").on("click",".delete", function() {
  var delete_sel = $(this).attr("data-id");
  populateList(removePerson(data, delete_sel));
});