I follow the tutorial and example of JQuery mobile to implement a menu. For the page itself, it works. But when I click a link, the new page (different html page) shows without the menu. I have to manually click "refresh" button of the browser to make the menu visible. What is wrong? Any information would be appreciated. Thanks in advance.
My two pages have the same css, js.. as follow. The differences between these two pages are the word"test1" and "test2"
<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css"> <script src="http://code.jquery.com/jquery-1.11.3.min.js"></script> <script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script> <title>test1</title> </head> <body> Test 1 <div data-role="page"> <div data-role="main" class="ui-content"> <a href="#popupNested" data-rel="popup" class="ui-btn ui-corner-all ui-shadow ui-btn-inline ui-icon-bars ui-btn-icon-left ui-btn-b" data-transition="pop">Choose a creature...</a> <div data-role="popup" id="popupNested" data-theme="none"> <div data-role="collapsibleset" data-theme="b" data-content-theme="a" data-collapsed-icon="arrow-r" data-expanded-icon="arrow-d" style="margin:0; width:250px;"> <div data-role="collapsible" data-inset="false"> <h2>Farm animals</h2> <ul data-role="listview"> <li><a href="test1.html" >test1</a></li> <li><a href="test2.html" >test2</a></li> </ul> </div><!-- /collapsible --> </div><!-- /collapsible set --> </div><!-- /popup --> </div> </div> </body> </html>