jQuery Mobile動態內容插入

好吧，有人會幫我弄清楚爲什麼在下面的代碼中的「測試」李是不可見的？我檢查了活dom和元素似乎正在處理：jQuery Mobile動態內容插入

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

元素下面已經display屬性設置爲none，它隱藏了它的兄弟姐妹：

<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在轉換none時所做的。 – Matrym 2011-12-26 09:46:12

我剛剛檢查過'test'的祖先，看看爲什麼'test'是不可見的，發現其中一個（至少）有'display：none'。 – Minras 2011-12-26 09:49:03

到changePage調用不起作用，因爲你只有一個單個頁面默認爲可見/活動。您可以通過觸發創建事件來強制更新活動頁面。

$('<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 Mobile動態內容插入

回答

相關問題