拼接JSON数组JavaScript

问题描述：

我创建了一个用于对javascript数组重用拼接功能的函数，但是，一旦运行它，就无法重用.

I created a function for reusing the splice feature for javascript arrays however, after I run it once, it cannot be reused.

var removePerson = function(d, person_id) { 
  var person_index = d.findIndex(i => i.id == person_id);
  d.splice(person_index, 1);
  return d;
};

我没有收到控制台错误.我不知道如何调试它.这是我的 JSFiddle .

I am not getting console errors. I do not know how to debug it. Here is my JSFiddle.

如果运行示例，您将看到可以从列表中删除任何1个人，但是当您尝试删除其余2个人中的任何一个时，则什么也没有发生(例如，控制台错误，控制台响应).知道如何支持removePerson()函数的重用吗?

If you run the example, you will see you can remove any 1 person from the list, but when you try to remove either of the remaining 2, nothing happens (e.g. console errors, console response). Any idea how I can support reuse for my removePerson() function?

答

由于populateList的工作方式，您的解决方案无法正常工作.

Your solution doesn't work because of how your populateList works.

在您的populateList中，有一行:

$('#load').empty();

此行清空表，并删除与click事件监听器关联的按钮.

This line empties the table and removes the buttons attached with click event listener.

然后，您添加一个全新的button.delete，它没有任何事件侦听器附加.

Then, you add completely new button.delete, which aren't attached with any event listener.

要解决此问题，可以将.on()放入populateList函数.

To solve this, you can put your .on() into populateList function.

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 .

或者，您可以使用此答案(这是一个更清洁的解决方案imo).

Alternatively, you can use solution from this answer (which is a cleaner solution imo).

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

关于他的答案为何可在 jQuery文档上进行的更多解释(请查看selector参数).

More explanation on why his answer works on jQuery documentation (Look at the selector parameter).

相关推荐