Javascript Jquery.each（）.click（）仅获取最后一个元素中的数据

我使用以下方法获取每个成员的json，并使用click侦听器创建一个元素

$.getJSON('/api/members', function (membersJson) {
    $(membersJson).each(function (i, item) {
        $('#contacts').append('<div class="membercard">' + item.Name + '</div>');
            .click(() => show_details(item));
    })
});

function show_details(item) {
    $('#memberName').val(item.Name);
    $('#memberOcc').val(item.Occupation);
}

---

单击membercard意味着将其信息发送到更详细的div。但是，当单击任何动态创建的div时，仅将循环中最后一个json中的项目数据发送到详细视图。这是为什么？我如何修复它？

这是JavaScript的常见问题。本质上，因为click事件发生在循环之后，“item”变量等于最后一个项。要解决此问题，只需更改：

$(“#contacts”).click(() => show_details(item));

致：

---

这将创建一个变量的副本，即使在循环完成后，该副本也将具有相同的值。

如果您在循环内绑定和迭代，这通常是为了避免，因为函数的作用域将在单击中，将只取循环的最后一个元素 尝试如下重构：

$('#contacts').on('click', '.membercard', function() {
    show_details($(this).data('item'));
});

$.getJSON('/api/members', function (membersJson) {
    $(membersJson).each(function (i, item) {
        var div = $('<div class="membercard">' + item.Name + '</div>');
        div.data('item', item);
        $('#contacts').append(div)
    })
});

function show_details(item) {
    $('#memberName').val(item.Name);
    $('#memberOcc').val(item.Occupation);
}

---

我打算将单击事件添加到每个动态创建的div，而不是联系人。我已经做了一个编辑，希望能让这更清楚？通过上面的绑定$'contacts'。单击，'.membercard'，对于您添加的每一个新元素，都会自动执行单击事件。

$('#contacts').on('click', '.membercard', function() {
    show_details($(this).data('item'));
});

$.getJSON('/api/members', function (membersJson) {
    $(membersJson).each(function (i, item) {
        var div = $('<div class="membercard">' + item.Name + '</div>');
        div.data('item', item);
        $('#contacts').append(div)
    })
});

function show_details(item) {
    $('#memberName').val(item.Name);
    $('#memberOcc').val(item.Occupation);
}