插入元素在基於jQuery Mobile的頁面

我用jQuery Mobile的應用程序，將最終結束了作爲一個移動設備上的非Web應用程序，因此，所有的內容必須是本地的實驗DOM。出於這個原因（我認爲）我需要在單個頁面中構建應用程序，其中描述了data-role="page"標籤，否則jQuery Mobile中的ajax加載機制似乎不起作用。插入元素在基於jQuery Mobile的頁面

該應用程序會從本地存儲數據庫中讀取數據，在一個有序列表中顯示在頁面上，使用jQuery Mobile的，看起來像一個本機應用程序樣式。

在我$(document).ready()功能我執行DB查詢和每個結果，我創建一個圍繞我的數據庫結果的<li>標籤，然後調用$(".list").append(li_str);其中.list是類我<ul>標籤。

頁面呈現彷彿jQuery Mobile的是不存在的 - 我看到每個<li>正確的數據，但它看起來並不正確。

比較這個結果與一個版本，我硬編碼<li>標籤頁面中的HTML - 它看起來像jQuery Mobile的修改標籤並插入了很多新的類等

也許我需要建立頁面從頁面加載週期早期的數據庫？有什麼建議麼？

來源

2011-02-10 speedwell

問題是this issue。因此，更改代碼：

<!DOCTYPE html> 
<html> 
<head> 
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a2/jquery.mobile-1.0a2.min.css" /> 
    <script src="http://code.jquery.com/jquery-1.4.4.min.js"></script> 
    <script src="http://code.jquery.com/mobile/1.0a2/jquery.mobile-1.0a2.min.js"></script> 
    <script> 
    function build_dynamic_content() 
    { 
     var num_entries = 5; 

     for (var i = 0; i < num_entries; ++i) 
     { 
      var li_str = "<li id=\"" + i + "\"><a href=\"#\">" + "Entry number " + (i + 1) + "</a>"; 
      li_str += "<img src=\"" + "icon.png" + "\" />"; 
      li_str += "</li>"; 

      $(".mainlist").append(li_str); 
     } 
    } 
    </script> 
</head> 

<body> 
    <div data-role="page" id="list" data-fullscreen="false"> 
     <div data-role="content"> 
      <ul class="mainlist" data-role="listview"> 
       <li id="0"><a href="#">Test entry</a><img src="icon.png"/></li> 
      </ul> 
     </div> 
    </div> 
<script>build_dynamic_content();</script> 
</body> 
</html>

或者，直到所有的元素都被創建（如連接線所描述的）可以延遲創建列表視圖：代碼轉儲

<!DOCTYPE html> 
<html> 
<head> 
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a2/jquery.mobile-1.0a2.min.css" /> 
    <script src="http://code.jquery.com/jquery-1.4.4.min.js"></script> 
    <script src="http://code.jquery.com/mobile/1.0a2/jquery.mobile-1.0a2.min.js"></script> 
    <script> 
    function build_dynamic_content() 
    { 
     var num_entries = 5; 

     for (var i = 0; i < num_entries; ++i) 
     { 
      var li_str = "<li id=\"" + i + "\"><a href=\"#\">" + "Entry number " + (i + 1) + "</a>"; 
      li_str += "<img src=\"" + "icon.png" + "\" />"; 
      li_str += "</li>"; 

      $(".mainlist").append(li_str); 
     } 
    } 

    $(function() 
    { 
     build_dynamic_content(); 
     $('ul.mainlist').listview(); 
    }); 
    </script> 
</head> 

<body> 
    <div data-role="page" id="list" data-fullscreen="false"> 
     <div data-role="content"> 
      <ul class="mainlist"> 
       <li id="0"><a href="#">Test entry</a><img src="icon.png"/></li> 
      </ul> 
     </div> 
    </div> 
</body> 
</html>

對不起;我無法在jsfiddle中得到這個工作。

來源

2011-02-10 01:18:37

這似乎沒有做任何不同的馬特。我做了一個沒有數據庫的小測試應用程序，顯示出問題。列表中的第一個條目是硬編碼的，看起來正確。其餘的都是動態生成的，並沒有： http://pastebin.com/1LTDZ4nE 你能看到我在做什麼錯？ – speedwell 2011-02-10 01:52:58

@speedwell：看我的編輯。 – 2011-02-10 02:56:41

馬特的回答不是問題的一般答案。我已經在其他問題上多次提到過。

上述工作與一個列表視圖，但沒有任何一般的內容。

要添加你需要知道的。第（）函數元素DOM中jQuery Mobile的。

我做對 http://jquerymobiledictionary.pl/faq.html

來源

2011-02-10 07:57:39 naugtur

無論調用$("changed-parent-element").listview()也不$("changed-parent-element").trigger("create")真的爲我工作的教程。爲了改變DOM內容多次重做了jQuery移動造型，我需要這樣的：

$("changed-parent-element").listview("refresh");

版本：jQuery Mobile的1.0 RC2

來源

2011-11-08 17:55:21

插入元素在基於jQuery Mobile的頁面

回答

相關問題