javascript - javascript-要素を動的にリストに追加しますが、ブラウザはUIを更新しません

Question

サーバーのデータ項目をロードするためのJavaScriptコードセグメントがあり、次のように生成されたLI要素を使用してUL要素に挿入します。

関数loadNewFileTemplates（）{

    var list = _fileTemplateContainer.find（ "ul"）;

    $ .submitToServer（ "[サーバーURL]"、null、関数（データ）{

        list.empty（）;

        if（data == ""）{
            list.append（ "テンプレートは利用できません。"）; //サンプルコードで、HTMLタグを削除しました
        }
        そうしないと {
            $ .each（data、function（index、item）{

                var itemElement = $（ "[HTMLテンプレート文字列]"）;

                itemElement.find（ "div [data-field ='image']"）。css（ "background-image"、 "url（" + item.icon + "）"）;
                itemElement.find（ "div [data-field ='caption']"）。text（item.caption）;
                itemElement.find（ "div [data-field ='description']"）。text（item.description）;
                itemElement.find（ "div [data-field ='type']"）。text（item.type）;

                itemElement.bind（ "クリック"、関数（e）{

                    $（e.target）.parents（ "ul"）。find（ "li"）。removeClass（ "projectSelected"）;
                    $（e.target）.parents（ "li"）。addClass（ "projectSelected"）;

                }）;

                itemElement.appendTo（list）;

            }）;
        }

        console.log（list）;
    }）;

}

このコードは最初の読み込みで機能しますが、2回目の読み込みでは、要素がUL要素に挿入された後にUIを更新できません。

データが正常に挿入されたことを確認したので（console.log（）を使用して結果を出力します）、この問題の理由を見つけることができません。

この問題のスクリーンショットをご覧ください。

この問題を解決するにはどうすればよいですか？ありがとう。

私のブラウザ：Chrome 19.0.1084.56、IE9.0.8112.16421jQueryバージョン1.5.1

Answer 1

私はこの問題を自分で解決しました。

jQueryプラグインを使用して、次のコードを使用してこのフォームを初期化します。

    designFrameManager.updateFrameBody（data）; //データはHTML文字列です。

    projectDesigner = $（data）.projectDesigner（{
        高さ：designFrameManager.getBodyHeight（）、
        幅：designFrameManager.getBodyWidth（）、
        projectName：名前
    }）;

updateFrameBody（）メソッドのコード：

    this.updateFrameBody = function（ui、initFunction）{

        _designFrameBody.html（ui）;

        if（initFunction！= null && $ .isFunction（initFunction））
            initFunction（）;

    };

初期化アクションはUIがDOMにバインドされた後に行われるため、プラグインの初期化をDOMにバインドできないと思います。そのため、スクリプトの呼び出し後にDOMは変更を自動更新できません。

だから、私はこれにコードを更新します：

    projectDesigner = $（data）.projectDesigner（{
        高さ：designFrameManager.getBodyHeight（）、
        幅：designFrameManager.getBodyWidth（）、
        projectName：名前
    }）;

    designFrameManager.updateFrameBodyByObject（
       projectDesigner//初期化されたオブジェクト
    ）;

updateFrameBodyByObject（）メソッドのコード：

   this.updateFrameBodyByObject = function（ui、initFunction）{

        _designFrameBody.html（ ""）;
        _designFrameBody.append（ui）;

        if（initFunction！= null && $ .isFunction（initFunction））
            initFunction（）;

    };

この問題は正常に修正されました。

すべての返信をありがとう。

Answer 2

これを実行してみてください：$('ul').listview('refresh');