Question

jquery mobile中是否有一种方法可以等待从我的db结果创建所有元素？

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

2 - 我做了一个$("body").on("pageinit", "#id-from-page", function(){ loadMyStuffs(); })来开始从database

安装我的东西

3 - loadMyStuffs();使用append();中的db result创建了一些元素。

基本上，在这三个步骤中工作，但问题是页面在元素创建之前显示。

那么，如何使用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);
}

任何提示，做我的客人。

Answer 1

事件处理程序仅绑定到当前选定的元素，并且在代码调用.on（）时它们必须存在于页面上。在加载任何其他HTML之前，文档元素在文档的头部可用，因此可以安全地将事件附加到那里而无需等待文档准备就绪。

尝试使用$(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>

我希望这会有所帮助。

JQM等到所有元素都被创建

1 个答案: