need to load and reload the same page for making the links work

need to load and reload the same page for making the links work

hi im developing my first app using jquery mobile, and i have an issue with 2 pages, in both pages if i load normally the page the link doesnt work, and if i reload the page the links works perfect.


in both web pages i have something like this:


  2. <!DOCTYPE html>
  3. <html lang="{country_code}">
  4. <head>
  5. <!-- META TAGS Declaration -->
  6. <meta charset="UTF-8">
  7. <title>MNT Graphic Design - About </title>
  8. <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0;" />
  9. <meta name="apple-mobile-web-app-capable" content="yes" />
  10. <meta name="author" content="MNT Graphic Design - http://www.mntdesign.co/" />
  12. <!-- CSS Declaration -->
  13. <link rel="stylesheet" type="text/css" href="{site_url}jquerymobile/css/jquery.mobile-1.3.1.css" />
  14. <link rel="stylesheet" type="text/css" href="{path='styles/m'}" />
  15. </head>

  17. <body>
  19. <div data-role="page" id="about" data-add-back-btn="true">
  20.  
  21.    
  22.    <div data-role="header" data-theme='a' id="header">
  23.        <h1> About Us </h1>
  24.    </div><!-- /header -->
  27.    <div data-role="content" data-theme='c' >
  29. <div class="choice_list"> 
  31. <ul data-role="listview" data-inset="true" >
  32. <li>
  33. <a href="#david" data-transition="slide"> 
  34. <h1>David</h1>
  35. <img src="http://www.mntdesign.co/uploads/imagenes/_thumb2/216346_10151483715269961_2029946791_n.jpg" alt="projectn1"/>
  36. <p> hello world! </p>
  37. </a>
  38. </li>
  39. <li>
  40. <a href="#alejandro" data-transition="slide"> 
  41. <h1>Alejandro</h1>
  42. <img src="http://www.mntdesign.co/uploads/imagenes/_thumb2/216346_10151483715269961_2029946791_n.jpg" alt="projectn2"/>
  43. <p> hello world! </p>
  44. </a>
  45. </li>
  48. </ul>
  50. </div>
  52. <p class="copyright">Copyright &copy; MNT. Designed by <a href="http://www.mntdesign.co" class="ui-link">MNTDesign</a></p>

  54. </div><!-- /content -->
  55.  
  56.    <div data-role="footer" data-theme='a' >
  58. <nav data-role="navbar">
  59. <ul>
  60. <li><a href="{path='m'}" data-icon="home">Home</a></li>
  61. </ul>
  62. </nav>
  63.        
  64.    </div><!-- /Foother -->
  65.    
  66. </div><!-- /page -->

  68. <div data-role="page" id="david" >
  69. <header data-role="header">
  70. <h1>Project #1</h1>
  71. <a href="#about" data-icon="grid" data-iconpos="notext" data-transition="slide">David</a>
  72. </header>
  73. <h1>David</h1>
  74. <p>hello world!</p>
  75. </div><!-- Page David -->
  77. <div data-role="page" id="alejandro" >
  78. <header data-role="header">
  79. <h1>Project #2</h1>
  80. <a href="#about" data-icon="grid" data-iconpos="notext" data-transition="slide">Alejandro</a>
  81. </header>
  82. <h1>Alejandro</h1>
  83. <p>hello world!</p>
  84. </div><!-- Page Alejandro -->
  87. </body>
  88. <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
  89. <script type="text/javascript" src="{site_url}jquerymobile/js/jquery.mobile-1.3.1.js"></script>
  92. <script type="text/javascript">
  93.    </script>
  95. </html>

in the second one i have a couple of galleries that i load using photoswipe with the same structure and the only different is the javascript that i use for load the galleries. how can i fix this? i dont want to load twice the same page in order to work.

photoswipe gallery javascript

  2. <script type="text/javascript">
  3. (function(window, $, PhotoSwipe){
  4. $(document).ready(function(){
  5. $('div.gallery-page')
  6. .on('pageshow', function(e){
  7. var 
  8. currentPage = $(e.target),
  9. options = {},
  10. photoSwipeInstance = $("ul.gallery a", e.target).photoSwipe(options,  currentPage.attr('id'));
  11. return true;
  12. })
  13. .on('pagehide', function(e){
  14. var 
  15. currentPage = $(e.target),
  16. photoSwipeInstance = PhotoSwipe.getInstance(currentPage.attr('id'));
  17. if (typeof photoSwipeInstance != "undefined" && photoSwipeInstance != null) {
  18. PhotoSwipe.detatch(photoSwipeInstance);
  19. }
  20. return true;
  21. });
  22. });
  23. }(window, window.jQuery, window.Code.PhotoSwipe));
  24.    </script>