开发者

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/

0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜