0

有没有办法jquery mobile等到从我的数据库结果中创建了所有元素？

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);
}

任何提示，做我的客人。

4

1 回答 1

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>

我希望这有帮助。

于 2013-03-01T20:33:49.180 回答