javascript - 拼接JSON数组JavaScript

我创建了一个为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()函数的重用吗？

最佳答案

您的解决方案因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中的解决方案（这是一种更干净的解决方案imo）。

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

关于他的答案为何适用于jQuery documentation的更多说明（请查看selector参数）。

populatelist

javascript - 拼接JSON数组JavaScript