Dynamically adding a page in jQuery Mobile not working
When I create a whole new page in jQuery Mobile the page gets created, but when I click the link with the id linking to the just created page, it does not work. The list item link stays selected (blue, in the standard theme), but the page itself does not load.
The page gets created by appending it to the body:
$('body').append('<div开发者_高级运维 id="' generatedId '" data-role="page"><div data-role="header"><h2>Page</h2></div><div data-role="content">content</div></div>');
When I turn off jQuery Mobile you can clearly see that the page gets created, but with jQM on it cannot be accessed.
What am I doing wrong?
The following worked for me...
<!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>
加载中,请稍侯......
精彩评论