2

我有一个奇怪的情况，我的代码在调试器（Chrome）中工作，也可以在 IE 9 上工作，但不能在 chrome 和 Firefox 中工作。我要做的就是将一堆列表元素附加到列表中。

HTML：

<div id="FriendSelector">
     <ul></ul>
</div>

JS：

var friends = []; //this gets loaded with about 600 friend objects (name, icon, id) earlier

function openFriendSelector() {
    var $friendSelector = $('#FriendSelector');
    $friendSelector.show();
    bindFriends();
}

function bindFriends() {
    var $list = $('#FriendSelector ul');

    for (i = 0; i < friends.length; i++) {
        var friend = '<li id="' + friends[i].id + '"><div><img src="' + friends[i].icon + '" class="avatar"/>' + friends[i].name+ '</div></li>';
        $list.append(friend);
    }
}

当我单击打开 FriendSelector DIV（最初隐藏）的按钮时，我看到一个空白 DIV，但是，如果我关闭弹出窗口并重新打开它，朋友们就在那里......

任何帮助表示赞赏。

4

2 回答 2

1

发现问题。该数组需要几秒钟才能加载（通过 ajax）。因此，在页面加载后，如果我等待几秒钟然后打开 div，它就可以工作。这解释了为什么它在调试器中工作。

于 2013-03-05T21:03:47.917 回答
0

尽量避免.append()一次调用这么多，因此请替换以下代码：

for (i = 0; i < friends.length; i++) {
        var friend = '<li id="' + friends[i].id + '"><div><img src="' + friends[i].icon + '" class="avatar"/>' + friends[i].name+ '</div></li>';
        $list.append(friend);
    }

对于这个：

for (i = 0, friend=''; i < friends.length; i++) {
        friend +='<li id="' + friends[i].id + '"><div><img src="' + friends[i].icon + '" class="avatar"/>' + friends[i].name+ '</div></li>';
}
$list.append(friend);

更新：
尝试在显示 div 之前加载朋友，如下所示：

function openFriendSelector() {
    bindFriends();
}

function bindFriends() {
    var $list = $('#FriendSelector ul');

    for (i = 0, friend = ''; i < friends.length; i++) {
        friend = '<li id="' + friends[i].id + '"><div><img src="' + friends[i].icon + '" class="avatar"/>' + friends[i].name+ '</div></li>';
    }
    $list.append(friend);
    $list.parent().show();
}
于 2013-03-05T19:55:34.507 回答