jquery mobile repeat display of internal page
An internal page displays correctly but when I come back to that page after displaying a popup dialog, the page is blank.
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<script src="http://code.jquery.com/jquery-1.6.1.min.js"></script>
<link href="js/jquery.mobile-1.0b1.css" rel="stylesheet" type="text/css" />
<script src="js/jquery.mobile-1.0b1.js" type="text/javascript"></script>
<script src="js/test.js" type="text/javascript"></script>
</head>
<body>
<div data-role="page" id="program"&g开发者_如何学Ct;
<div data-role="header" data-nobackbtn="true">
<h1>Test Page</h1>
</div><!-- /header -->
<div data-role="content" data-theme="a" id="listChoices">
<div data-role="controlgroup" id="possible">
<a href="#" data-role="button" id="choice1" class="response">1</a>
<a href="#" data-role="button" id="choice2" class="response">2</a>
<a href="#" data-role="button" id="choice3" class="response">3</a>
<a href="#" data-role="button" id="choice4" class="response">4</a>
</div>
</div><!-- /content -->
<div data-role="footer" style="font-family: Arial, Helvetica, sans-serif; font-size: x-small; color: #FFFFFF">
test (c) 2011
</div><!-- /footer -->
</div><!-- /page -->
<div data-role="page" id="popup">
<div data-role="header" data-nobackbtn="true" data-theme="e">
<h1>How did I do?</h1>
</div><!-- /header -->
<div data-role="content" data-theme="d">
<label id="msg" style="margin-right:auto;margin-left:auto; text-align:center; font-family:@Arial Unicode MS; font-size:large"></label>
<div id="Div5" style="width:200px;margin-right:auto;margin-left:auto"><input id="btnReturn" type="button" value="Continue" /> </div>
</div><!-- /content -->
<div data-role="footer" style="font-family: Arial, Helvetica, sans-serif; font-size: x-small; color: #FFFFFF">
Test (c) 2011
</div><!-- /footer -->
</div><!-- /page -->
</body>
</html>
var msg
$(document).ready(function ()
{
$("[class^='response']").click(function ()
{
var t = this.id.replace('choice', '');
$("#msg").html('You pressed number '+ t);
$.mobile.changePage("#popup", { transition: "flip" });
});
$('#btnReturn').click(function ()
{
$("#popup").hide()
$.mobile.changePage("#program", { transition: "flip" });
});
});
Get rid of this line:
$("#popup").hide();
You are hiding the popup so when you switch back to it the div is hidden.
http://jsfiddle.net/j6BGp/12/
加载中,请稍侯......
精彩评论