Question

请帮忙，伙计们。

在Ajax调用之后，我有一个带有两行（用户）的JSON对象。我有动态ID，因为我打算在页面上加载一些内容（一个用于编辑用户详细信息的表单）。我的问题是FOR循环生成的每个用户行具有相同的ID。因此，所有Ajax生成的行都具有相同的ID，在这种情况下为48。这是代码..

// Get the admin information
var loadAdmin = function() {
    $.ajax({
        type: 'GET',
        id: id,
        cache: false,
        url: 'scripts/administratorsList.php?id=' + id
    }).done(function(data) {
        var adminData = JSON.parse(data);

        for (var i in adminData) {
            var userId = adminData[i].id;
            $('#adminList').append('<li class="media"><a href="#" class="media-link" id="edit' + userId + '"><div class="media-left"><img src="assets/images/placeholder.jpg" class="img-circle" alt=""></div><div class="media-body"><div class="media-heading text-semibold">' + adminData[i].userName + '</div><span class="text-muted">Administrator</span></div><div class="media-right media-middle text-nowrap"><span class="text-muted"><i class="icon-pin-alt text-size-base"></i>&nbsp;' + adminData[i].userCompany + '</span></div></a></li>')

            // Add the edit form view here          
            $('#edit' + userId).on('click', function(userId) {
                var userId = adminData[i].id;
                $('#userConfig').append('Here I will generate the form to edit user ' + userId); // This is where the ID stays the same. I have used .append over .html for debugging purposes. Each row returns an ID of 48
            });
        }
    });
};

以下是JSON文件

[{
    "id": "17",
    "userName": "Mark Bell",
    "userCompany": "Pro Movers",
    "userTelephone": "12345678911",
    "userEmail": "info@info.uk",
    "userPassword": "md5hash",
    "userUAC": "6",
    "originalUAC": "6",
    "userRegistered": "20150826",
    "activationKey": "0",
    "userLastLoggedIn": "20160302",
    "userBranch": "0",
    "userAdmin": "0"
}, {
    "id": "48",
    "userName": "demo",
    "userCompany": "Monstermove",
    "userTelephone": "12345678912",
    "userEmail": "info@info.uk",
    "userPassword": "demo",
    "userUAC": "6",
    "originalUAC": "6",
    "userRegistered": "20160305",
    "activationKey": "0",
    "userLastLoggedIn": "20160305",
    "userBranch": "3",
    "userAdmin": "3"
}]

提前致谢

随着Jacub的实施

for（var i in adminData） {

        var userId = adminData[i].id;
        storeValueToRemainSame(userId);

    }

    function storeValueToRemainSame(userId) {
    $('#adminList').append('<li class="media"><a href="#" class="media-link" id="edit' + userId + '"><div class="media-left"><img src="assets/images/placeholder.jpg" class="img-circle" alt=""></div><div class="media-body"><div class="media-heading text-semibold">' + adminData[i].userName + '</div><span class="text-muted">Administrator</span></div><div class="media-right media-middle text-nowrap"><span class="text-muted"><i class="icon-pin-alt text-size-base"></i>&nbsp;' + adminData[i].userCompany + '</span></div></a></li>')

        // Add the edit form view here          
        $('#edit' + userId).on('click', function(userId) {
            var userId = adminData[i].id;
            $('#userConfig').append('Here I will generate the form to edit user ' + userId); // This is where the ID stays the same. I have used .append over .html for debugging purposes. Each row returns an ID of 48
        });
    }

Answer 1

这里的问题是你引用了更改的处理程序之外的值，因此保留了最后一个值。

for(var i in data) {
    var value = i;
    $('#someId').on('click', function(){
         console.log(value);
    });
}

唯一的书面值将是最后一个，因为它的引用将保留。可能的解决方案是：例如：

function storeValueAndHandleClickEvent(value){
    $('#someId').on('click', function(){
         console.log(value);
    });
}

for(var i in data) {
    storeValueAndHandleClickEvent(i);
}

编辑：如果我使用与问题相同的代码

for (var i in adminData) {
    var userId = adminData[i].id;
    storeValueToRemainSame(userId);
}

function storeValueToRemainSame(userId) {
    $('#adminList').append('<li class="media"><a href="#" class="media-link" id="edit' + userId + '"><div class="media-left"><img src="assets/images/placeholder.jpg" class="img-circle" alt=""></div><div class="media-body"><div class="media-heading text-semibold">' + adminData[i].userName + '</div><span class="text-muted">Administrator</span></div><div class="media-right media-middle text-nowrap"><span class="text-muted"><i class="icon-pin-alt text-size-base"></i>&nbsp;' + adminData[i].userCompany + '</span></div></a></li>')

    // Add the edit form view here          
    $('#edit' + userId).on('click', function(userId) {
        var userId = adminData[i].id;
        $('#userConfig').append('Here I will generate the form to edit user ' + userId); // This is where the ID stays the same. I have used .append over .html for debugging purposes. Each row returns an ID of 48
    });
}

Answer 2

在ajax

之外尝试这个简单的代码

您将使用事件委托，将从动态添加的dom元素的id中选择id

  $('ul').on('click','div[id^="edit"]',function() {
                    var userId = $(this).attr('id').substring(4);
                    $('#userConfig').append('Here I will generate the form to edit user ' + userId); // This is where the ID stays the same. I have used .append over .html for debugging purposes. Each row returns an ID of 48
                });

在jquery中通过json迭代

2 个答案: