Question

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

1.这些方法正确调用ajax用于动态内容生成的文档就绪函数。

2.当动态生成内容时，jQuery移动样式不会过来。

这是我的代码

<!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>

Answer 1

不幸的是，这不起作用。

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

无论你使用触发器（'create'）还是触发器（'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");
});

Answer 2

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

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

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

Answer 3

试试这个，它对我有用：
- 首先，使用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移动样式适合我

jQuery移动样式未应用于动态加载的内容

3 个答案: