jquery append()在chrome调试器和IE上工作，但在chrome中不工作

jquery append() works in chrome debugger and on IE, but not in Chrome

本文关键字：chrome 工作 但在 IE append 调试器 jquery      更新时间：2023-09-26

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

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

尽量避免一次调用这么多.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();
}
相关文章：