拼接 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 的解决方案（这是一个更清洁的解决方案 imo）。

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

更多解释为什么他的答案适用于jQuery documentation（查看selector 参数）。

Answer 2

试试这个代码：JSFiddle

或代码sn-p：

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));
});