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 に答える