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，但是，如果我关闭弹出窗口并重新打开它，那么朋友就在那里......

感谢任何帮助。

Answer 1

请尽量避免这么多.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();
}

Answer 2

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

jquery append（）适用于chrome调试器和IE浏览器，但不适用于Chrome

2 个答案: