javascript - jquery append() 适用于 chrome 调试器和 IE，但不适用于 Chrome

Question

我有一个奇怪的情况，我的代码在调试器 (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，但是，如果我关闭弹出窗口并重新打开它， friend 就在那里...

感谢任何帮助。

Answer 1

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