jQuery MobileベースのページでDOMに要素を挿入する

jQuery Mobileアプリケーションを試していますが、最終的にモバイルデバイス上で非Webアプリケーションとなるため、すべてのコンテンツがローカルでなければなりません。その理由で（私は）私はdata-role="page"タグで区切られた単一のページでアプリケーションを構築する必要があります。それ以外の場合、jQuery Mobileのajax読み込み機構は動作していないようです。jQuery MobileベースのページでDOMに要素を挿入する

アプリケーションは、ローカルストレージDBからデータを読み取り、jQuery Mobileを使用してネイティブアプリのようにスタイル付けされた順序付けられていないリストにページを表示します。私はDBの検索を実行し、それぞれの結果を得るために、私は私のDBの結果を中心に<li>タグを作成し、.listは私<ul>タグのクラスです$(".list").append(li_str);を呼び出して、私の$(document).ready()機能で

。

jQuery Mobileが存在しないかのようにページがレンダリングされます - それぞれ<li>に正しいデータが表示されますが、正しく表示されません。 jQueryのモバイルタグを変更し、など

をたくさんのクラスを挿入するようにそれたぶん私はページを作成する必要が見えます - IハードコードページのHTML内<li>タグはバージョンで、この結果を比較すると

ページのロードサイクルの早い段階でDBから？助言がありますか？

出典

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); 
     } 
    } 

    $(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>

コードダンプのため申し訳ありません：だから、あなたのコードを変更：すべての要素は、（リンクされたスレッドで説明したように）作成されるまで

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

代わりに、あなたはリストビューを作成遅らせることができます;私はこれをjsfiddleで働かせることができませんでした。

出典

2011-02-10 01:18:37

任意の異なるマットを作るために表示されませんでしたDOMのコンテンツを複数回変更し、私はこれを必要とjQueryのモバイルスタイリングをやり直すために。私はこの問題を呈するDBのない小さなテストアプリを作った。リストの最初のエントリはハードコードされており、正しく表示されます。残りは動的に生成され、実行されません。 http://pastebin.com/1LTDZ4nE 私が間違っていることを確認できますか？ – speedwell

@speedwell：私の編集を参照してください。 –

は完全に機能しました。確かに多くのありがとう。 – speedwell

マットの答えは質問に対する一般的な答えではありません。私はすでに他の質問で多くの時間をカバーしてきました。

上記はlistviewで動作しますが、一般的な内容ではありません。

jQuery MobileでDOMに要素を追加するには、.page（）関数を知る必要があります。

私はその http://jquerymobiledictionary.pl/faq.html

出典

2011-02-10 07:57:39 naugtur

このサイトには到達できませんが、OPの問題に対する唯一の正解が含まれているため残念です。 http://jquerymobiledictionary.pl/faq.htmlに見つかりました： => DOMを更新した後で、挿入された要素に対してトリガー（ 'create'）を呼び出します（例： $（ '＃myelement'）.html（ 'updated content'）。 – chrisv

はい、私はサイトをドメインに移しました。ほとんどの投稿を更新しましたが、重複しているものがたくさんあるので、すべて見つけられませんでした。報告してくれてありがとう。 – naugtur

のチュートリアルをやったんどちらも本当に私のために働いた$("changed-parent-element").listview()も$("changed-parent-element").trigger("create")を呼び出します。

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

バージョン：jQueryのモバイル1.0 RC2

出典

2011-11-08 17:55:21

jQuery MobileベースのページでDOMに要素を挿入する

答えて

関連する問題