在jQuery Mobile中动态添加页面无法正常工作

时间:2011-08-10 01:52:55

标签: jquery ajax mobile jquery-mobile

当我在jQuery Mobile中创建一个全新的页面时,页面会被创建,但当我点击链接到刚刚创建的页面的id链接时,它就不起作用了。列表项链接保持选中状态(蓝色,在标准主题中),但页面本身不会加载。

通过将页面附加到正文来创建页面:

$('body').append('<div id="' generatedId '" data-role="page"><div data-role="header"><h2>Page</h2></div><div data-role="content">content</div></div>');

当我关闭jQuery Mobile时,您可以清楚地看到该页面已创建,但无法访问其中的jQM。

我做错了什么?

1 个答案:

答案 0 :(得分:2)

以下对我有用......

<!DOCTYPE html>
<html>
 <head>
<meta name="viewport" content="width=device-width, initial-scale=1"> 
<!-- standard Jquery/jQuery Mobile Libraries -->
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0b2/jquery.mobile-1.0b2.min.css" />   
<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.2.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/mobile/1.0b2/jquery.mobile-1.0b2.min.js"></script>   
<script type="text/javascript">
$(document).ready(function(){
    for(i=0;i<3;i++){
        $('body').append('<div id="test'+i+'" data-role="page"><div data-role="header"><h2>Page'+i+'</h2></div><div data-role="content">content'+i+'</div></div>');
    }
});
</script>
</head> 

<body>  
<div data-role="page" id="mainmenu">
    <div data-role="header"><h1>Sample Home</h1></div>
    <div class="ui-body ui-body-c">
        <div data-role="content">   
            <a href="#test0" class="preShowHTML">Sample 1</a>     
            <a href="#test1" class="preShowHTML">Sample 2</a>     
            <a href="#test2" class="preShowHTML">Sample 3</a>                               
        </div>      
    </div>          
</div>