jquery append（）在Chrome调试器和IE中工作，但不在Chrome中

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

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

任何帮助表示赞赏。

来源

2013-03-05 Prabhu

你在文档就绪或窗口加载处理程序中运行JS？ – 2013-03-05 19:50:53

文档准备好了... – Prabhu 2013-03-05 19:51:18

你能提供jsfiddle链接吗 – MIIB 2013-03-05 19:52:36

尽量避免一下子让很多.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);

UPDATE：
尝试之前加载朋友显示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-05 19:55:34 Nelson

感谢您的提示。我改变了它。但是，它仍然存在相同的问题。一旦我关闭并重新打开div，朋友就可以看到。 – Prabhu 2013-03-05 19:58:48

好吧，你可以尝试加载HTML内容之前显示div，看到我更新的答案。 – Nelson 2013-03-05 20:03:10

不幸的是，这并不起作用。再一次，当我在调试器中遍历它时，它确实有效。 – Prabhu 2013-03-05 20:11:21

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

来源

2013-03-05 21:03:47 Prabhu

jquery append（）在Chrome调试器和IE中工作，但不在Chrome中

回答

相关问题