javascript - 遍历DOM元素

这就是我的功能，如果您单击表单的某些部分，它将从列表中删除人员：

function ParticipantsDeleteClick(model, url) {
for (i in model.Participants) {
    $("#delete" + i).click(function () {
        $.ajax({
            url: url,
            type: 'POST',
            contentType: 'application/json; charset=utf-8',
            data: JSON.stringify({ id: model.Participants[i].Id }),
            success: function (result) {
                result ? $("#participant" + i).remove() : alert("Delete failed");
            },
            error: function () {
                alert("Could not get a response from the server.");
            }
        });
    });
}

}

出于某种原因，单击哪个人都没有关系，它将始终从列表中删除最后一个人。而且它只能工作一次，因为一旦删除了最后一个“ i”，其他所有单击函数便会指向具有最后一个i值的dom元素。

我不知道为什么每次添加单击功能时，它们都指向循环中的最后一个i值。我修改了此函数，添加了一个临时变量，该临时变量采用了我的整数值，但也不起作用：

function ParticipantsDeleteClick(model, url) {
for (i in model.Participants) {
    var temp = parseInt(i);
    $("#delete" + temp).click(function () {
        $.ajax({
            url: url,
            type: 'POST',
            contentType: 'application/json; charset=utf-8',
            data: JSON.stringify({ id: model.Participants[temp].Id }),
            success: function (result) {
                result ? $("#participant" + temp).remove() : alert("Delete failed");
            },
            error: function () {
                alert("Could not get a response from the server.");
            }
        });
    });
}

}

因此，我不确定如何使它正常工作。

最佳答案

i始终在循环中被覆盖。您需要关闭，例如使用$.each(function(){..}或通过将循环的主体包装在自调用函数中。

function ParticipantsDeleteClick(model, url) {

    $.each(model.Participants, function(i){ //The `function` creates a closure
        $("#delete" + i).click(function () {
            $.ajax({
                url: url,
                type: 'POST',
                contentType: 'application/json; charset=utf-8',
                data: JSON.stringify({ id: model.Participants[i].Id }),
                success: function (result) {
                    result ? $("#participant" + i).remove() : alert("Delete failed");
                },
                error: function () {
                    alert("Could not get a response from the server.");
                }
            });
        });
    }
}