jQuery移動樣式未應用於動態加載的內容

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需要至少一個預定義頁面才能正常工作。

無論您使用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");
});

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 個解決方案

解決方案1
1 已采納 2013-02-28 20:14:56

解決方案2
0 2013-02-28 10:49:30

解決方案3
0 2013-03-14 10:25:45

jQuery移動樣式未應用於動態加載的內容

問題描述

3 個解決方案

解決方案1 1 已采納 2013-02-28 20:14:56

解決方案2 0 2013-02-28 10:49:30

解決方案3 0 2013-03-14 10:25:45

解決方案1
1 已采納 2013-02-28 20:14:56

解決方案2
0 2013-02-28 10:49:30

解決方案3
0 2013-03-14 10:25:45