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动态内容插入

回答

相关问题