我创建了一个函数来重用 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 中的解决方案(在我看来,这是一个更干净的解决方案)。
$("table").on("click",".delete", function() {
var delete_sel = $(this).attr("data-id");
populateList(removePerson(data, delete_sel));
});
更多解释为什么他的答案适用于 jQuery documentation (查看选择器
参数)。
关于javascript - 拼接 JSON 数组 JavaScript,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/47565086/