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（查看selector参数）。

Answer 2

试试此代码：JSFiddle

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

Splice JSON数组JavaScript

2 个答案: