0

jquery mobileデータベースの結果からすべての要素が作成されるまで待つ方法はありますか?

1 -click()火事$.mobile.changePage("somePage.html");

2 - 私は $("body").on("pageinit", "#id-from-page", function(){ loadMyStuffs(); })自分のもののマウントを開始するために を作成しましたdatabase

3 - from myloadMyStuffs();を使用していくつかの要素を作成します。append();db result

基本的に、この 3 つの手順で作業しますが、問題は、要素が作成される前にページが表示されることです。

では、どうすれば の4 stepようなものを作成できshowpagenowますか?

ループは次のようになります。

for(var i = 1; i <= imgNum; i++ ){
    // stats from step

    var imageList = "<li class='img-steps'>"+
                        "<img class='view-step' src='"+ base_url + "/" + data.result[i].IMGPAT + data.result[i].IMGNAM + "'/>"+
                    "</li>";

    // append to ul list image
    $(".img-ul").append(imageList);
}

ヒントがあれば、私のゲストになってください。

4

1 に答える 1

1

イベント ハンドラーは、現在選択されている要素にのみバインドされ、コードが .on() を呼び出す時点でページに存在する必要があります。document 要素は、他の HTML をロードする前にドキュメントの head で使用できるため、ドキュメントの準備が整うのを待たずに安全にイベントをアタッチできます。

使ってみて$(document).on("pageinit", "#id-of-page", function()

以下の例を確認してください。

<!doctype html>
<html lang="en">
   <head>
        <title>Cars example</title>
        <link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.css" />
        <script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
        <script src="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.js"></script>
        <script>
            $(document).on( "pageinit", "#car-details-page", function( e ) {
                var listItems = '';
                for (var i=0; i<50; i++) {
                    listItems += ["<li><a href=\"#\" id=\"acura\">Acura_",i,"</a></li>"].join("");
                }
                $("#car-list").append(listItems).listview("refresh");
            });
        </script>
    </head>
    <body>
        <div id="car-page" data-role="page">
            <div data-role="header">
                <h1><a data-ajax="false" href="/">Car list</a></h1>
            </div>
            <div data-role="content">   
                <a href="#car-details-page">Go to Page 2</a>
            </div>
        </div>
        <div id="car-details-page" data-role="page">
            <div data-role="header">
                <h1><a data-ajax="false" href="/">Car details</a></h1>
                <a data-rel="back">Back</a>
            </div>
            <div data-role="content">   
                <ul data-role="listview" id="car-list">
                </ul>
            </div>
        </div>
    </body>
</html>

これが役立つことを願っています。

于 2013-03-01T20:33:49.180 に答える