1

我有 jQuery 移动应用程序，当用户成功登录时，我必须显示通过 Ajax 和 json 动态解析加载的多页模板内容。所以有两个问题

1.这些方法是否正确在文档就绪功能上调用 ajax 以生成动态内容。

2.当内容被动态生成时，jQuery mobile Styles 不会出现。

这是我的代码

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet"
    href="http://jquerymobile.com/demos/1.3.0-beta.1/css/themes/default/jquery.mobile-1.3.0-beta.1.css" />
<script src="cordova-2.4.0.js"></script>
<script src="js/jquery-1.8.2.min.js"></script>
<script src="js/jquery.mobile-1.3.0.min.js"></script>
<script>
$(document).ready(function() {
        $
                .ajax({
                    url : "demourl.com",
                    type : "GET",
                    success : function(data) {
                        var msgData = $.parseJSON(data);                

                            $("<div data-role='page'>").appendTo("#pageData")
                                    .trigger("create");
                            $("<div data-role='header'>").appendTo("#pageData")
                                    .trigger("create");
                            $("<h1>Page Title</h1>").appendTo("#pageData")
                                    .trigger("create");
                            $("<div>").appendTo("#pageData").trigger("create");
                            $("<div>").appendTo("#pageData").trigger("create");                     

                    }
                });

    });
</script>
<title>Message list</title>
</head>
<body>

    <div id="pageData"></div>
</body>
</html>
4

3 回答 3

1

不幸的是，这行不通。

jQuery Mobile 至少需要一个预定义的页面才能正常工作。

无论您是使用 trigger('create') 还是 trigger('pagecreate') 来增强新页面标记，除非至少有一个常规 jQM 页面，否则这些功能都会失败。

但是你可以作弊，而不是让 jQM 增强你的第一个动态页面，你自己做：http: //jsfiddle.net/Gajotres/smsnP/

$(document).ready(function() {
    $('<div id="index" data-role="page" data-url="index" tabindex="0" class="ui-page ui-body-c ui-page-active" style="min-height: 386px;"><div data-role="header" class="ui-header ui-bar-a" role="banner"><h3 class="ui-title" role="heading" aria-level="1">First Page</h3></div></div>').appendTo("body");
});
于 2013-02-28T20:14:56.873 回答
0

尝试在您的页面上执行此操作：

 $('#pageData').page('refresh', true);

它应该触发元素以呈现 jquery 移动样式。

于 2013-02-28T10:49:30.823 回答
0

试试这个，它对我有用：
-首先，使用 ajax ($.ajax, $.post,..) 加载您需要的
数据 - 收到数据后，加载 jquery 移动脚本

此代码对我有用：

<head>
  <link rel="stylesheet" href="css/jquery.mobile-1.2.0.css" />
  <link rel="stylesheet" href="css/jqm-docs.css" />
  <script src="js/jquery.js"></script>
  <script>
  $(document).ready(function() {
     $.post(url,
         {param: var},
         function(data){
            if( data.success )
            {
               $("#total_marcatges").append(data.total);
               $("#marcatges").append(data.marcatges);
               $.getScript('js/jquery.mobile-1.2.0.js', function() {
                   $("#sortir span span.ui-btn-text").append("&nbsp;&nbsp;");
               });
            }else
            {
               alert("error");
            }
        },
        "json"
);

之后，为我应用了 jquery 移动样式

于 2013-03-14T10:25:45.767 回答