Question

我使用以下内容获取每个成员的json，并使用单击侦听器创建一个元素。

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

当点击会员卡时，它意味着将其信息发送到更详细的div。但是，当单击任何动态创建的div时，只有循环中最后一个json的item数据才会发送到详细视图。为什么这样，我该如何解决？

Answer 1

你是在循环中绑定和迭代，这是为了避免一般情况，因为函数的范围将在单击中，将只采用循环的最后一个元素尝试这样的重构：

$('#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);
}

Answer 2

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

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

要：

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

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

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

2 个答案: