在jquery mobile中设置动态内容

时间:2013-06-01 08:46:22

标签: jquery-mobile

我知道也有类似的问题和答案。但我的问题不同了。这是我用来加载和样式化我的内容的代码示例。

 $("body").on("click","[data-view]",function(){
        var view=$(this).attr("data-view");
        $("#mainView").load("pageRouter.php?view="+view).trigger("create");

    });

我搜索了论坛,发现.trigger("create")是对动态加载内容进行样式化的方法。但它没有帮助。

1 个答案:

答案 0 :(得分:1)

解决方案

您执行错误,加载是异步功能,因此您需要等待它加载内容才能增强内容。

您需要这样做:

$("#mainView").load("pageRouter.php?view="+view, function() {
   $(this).trigger("create");
});

如果您只加载内容,但是如果您要加载整页,使用页眉和页脚,则可以使用此功能:

$("#mainView").load("pageRouter.php?view="+view, function() {
   $(this).trigger("pagecreate");
});

详细了解潜在客户及其回调 here

工作示例:

<强>的index.php

<!DOCTYPE html>
<html>
    <head>
        <title>jQM Complex Demo</title>
        <meta http-equiv='Content-Type' content='text/html; charset=utf-8'/>
        <meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; minimum-scale=1.0; user-scalable=no; target-densityDpi=device-dpi"/>
        <link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.css" />
        <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
        <script src="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js"></script>    
        <script>
            $(document).on('pagebeforeshow', '#index', function(){ 
                $("#index").load("load.php", function() {
                    $(this).trigger("pagecreate");
                });
            });
        </script>
    </head>
    <body>
        <div data-role="page" id="index">

        </div>    
    </body>
</html>   

<强> load.php

<div data-theme="b" data-role="header">
    <h1>Index page</h1>
</div>

<div data-role="content">
    <a data-role="button">Button</a>
</div>