jQueryモバイル動的コンテンツの挿入

次のコードの "テスト" liが表示されない理由を知ってもらえますか？私は生きているdomを点検し、要素は処理されているように見える：jQueryモバイル動的コンテンツの挿入

<!DOCTYPE HTML> 
<html> 
<head> 

    <!-- Grab Google CDN's jQuery, with a protocol relative URL; fall back to local if necessary --> 
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script> 
    <script src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js"></script> 
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" /> 
    <script> 
    $(document).ready(function(){ 
     $('<div data-role="content" class="content"><ul data-role="listview" data-inset="true"><li><a href="#im?at=animals">test</a></li></ul></div>').appendTo("#home").page(); 
     $.mobile.changePage("#home", {transition: "none"}); 
    }); 
    </script> 
</head> 

<body> 
<div id="home" data-role="page"> 
</div> 
</body> 
</html>

ありがとうございます。

出典

2011-12-26 Matrym

以下の要素がnoneに設定display性質を持っており、それはその兄弟を非表示にします。

<div data-role="content" class="content ui-page ui-body-c ui-content" tabindex="0" role="main">

CSSルール：

.ui-mobile [data-role="page"], .ui-mobile [data-role="dialog"], .ui-page { 
top: 0; 
left: 0; 
width: 100%; 
min-height: 100%; 
position: absolute; 
display: none; 
border: 0; 
}

出典

2011-12-26 09:33:26 Minras

正しいjqueryモバイルメソッドが表示されるようになっていますか？私はそれがchangePageがtransition noneと何をするのかと思った。 – Matrym

私は 'test'の祖先を調べて' test'が目に見えない理由を知り、そのうちの1人（少なくとも）に 'display：none'があることを発見しました。 – Minras

をあなたが唯一持っているのでchangePageへの呼び出しが動作しません。デフォルトで表示/有効になっている1ページ。アクティブなページを強制的に更新するには、createイベントをトリガーします。

$('<div data-role="content" class="content"><ul data-role="listview" data-inset="true"><li><a href="#im?at=animals">test</a></li></ul></div>').appendTo("#home"); 
$.mobile.changePage("#home", {transition: "none"}); 
$.mobile.activePage.trigger('create');

出典

2011-12-26 09:54:23 nxt

jQueryモバイル動的コンテンツの挿入

答えて

関連する問題