JavaScript .load 在 .click 后未显示正确的页面结果

Question

以下代码允许用户单击“作为”按钮并拒绝好友请求。即使页面上显示多个结果，它也能正常运行，因为它使用 wrapper.children('.decline').click(function() { 来定位正确的结果。

发生这种情况后，以下 $( "#containerFriends").load("friends.html #containerFriends"); 应刷新页面，以便显示最新结果。然而，即使结果应该仍然存在，也会显示完全空白的页面。如果我手动刷新页面，就会显示正确的结果。

我不确定以下内容有什么问题以及导致此类问题的原因是什么？

mainQuery.find({
            success: function(results) {
                var friends = [];
                for (var i = 0; i < results.length; i++) {
                    friends.push({
                        imageURL: results[i].get('toUser').get('pic'),
                        username: results[i].get('toUser').get('username'),
                        userId: results[i].get('toUser').id,
                        status: results[i].get('status'),



                        // Saves the object so that it can be used below to change the status//
                        fetchedObject: results[i]


                    });


                }
                var select = document.getElementById("FriendsConnected");
                $.each(friends, function(i, v) {
                    var opt = v.username;
                    var el = document.createElement("option");
                    el.textContent = opt;
                    el.value = opt;
                    select.appendChild(el);
                })


                $('#containerFriends').empty();
                $('#containerFriendsConnected').empty();

                _.each(friends, function(item) {
                    var wrapper = $('<div class="portfolio-item-thumb one-third"></div>');
                    wrapper.append('<img class="responsive-image friendImgOutline" src="' + item.imageURL + '" />' + '<br>');
                    wrapper.append('<div class="tag">' + item.username + '</div>');
                    wrapper.append('<div type="button" class="btn btn-danger mrs decline">' + 'Unfriend' + '</div>');

                    $('#containerFriends').append(wrapper);



                    //The following lets the user accept or decline a friend request by changing the status the status from Pending to Declined/////
                    wrapper.children('.decline').click(function() {
                        $(".decline").click(function() {
                            item.fetchedObject.set("status", "Rejected");
                            $( "#containerFriends" ).load("friends.html #containerFriends" );


                            item.fetchedObject.save(null, {
                                success: function(results) {
                                    console.log("REJECTED");

                                },
                                error: function(contact, error) {
                                    // The save failed.
                                    // error is a Parse.Error with an error code and description.
                                    alert("Error: " + error.code + " " + error.message);
                                }
                            });


                        });


                    });

                });

            },
            error: function(error) {
                alert("Error: " + error.code + " " + error.message);
            }
        });

Answer 1

我实际上通过再次调用该函数解决了这个问题，然后确保数据是最新的并刷新页面。我认为问题在于 $('#containerFriends').append(wrapper); 在用户 .click

后不包含更新的数据