javascript - 拼接 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 .

或者，您可以使用 this answer 中的解决方案(在我看来，这是一个更干净的解决方案)。

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

更多解释为什么他的答案适用于 jQuery documentation (查看选择器参数)。