为什么Jquery Mobile代码需要刷新每个页面的工作？

我在JQuery Mobile上遇到了一些问题，我对此很新，所以也许我的问题看起来有点天真。为什么Jquery Mobile代码需要刷新每个页面的工作？

我有2页，1是index.html然后我有一个search.html，我有一个sidemenu插件的两个html。我为search.html做了自动对焦。当我点击一个按钮从索引到搜索。我的sidemenu没有放入格式，自动对焦也不起作用。只有当我刷新它的页面时才起作用。我已经在每个html中包含了所有的CSS，js。而且我也已经在页面的开头加载了所有的脚本。如果我在搜索页面刷新并重新回到索引，索引页就会混乱，我必须刷新它才能使其工作。

不知道为什么会发生这种情况。

这是search.html

<!DOCTYPE html> 
<body> 
    <html> 
     <meta name="viewport" content="width=device-width, initial-scale=1"> 
     <link rel="stylesheet" href="css/jquery.mobile-1.4.4.min.css" /> 
     <link rel="stylesheet" href="css/account.css" /> 
     <link rel="stylesheet" href="css/jquery.mmenu.css" /> 
     <link rel="stylesheet" href="css/jquery.mmenu.all.css" /> 
     <script src="js/jquery-1.11.1.js"></script> 
     <script src="js/jquery.mobile-1.4.4.min.js"></script> 
     <script src="js/jquery.mmenu.min.all.js"></script> 
     <link rel="stylesheet" href="css/jquery.mmenu.fullscreen.css" /> 
     <link rel="stylesheet" href="css/jquery.mmenu.positioning.css" /> 
     <link rel="stylesheet" href="css/jquery.mmenu.themes.css" /> 

     <script type="text/javascript"> 
     $(document).on('pageinit',function() { 
      $("#menu").mmenu({ 
       // options 
      }, { 
       // configuration 
       offCanvas: { 
        pageNodetype: "section" 
       } 
      }); 
     }); 
     </script> 

     <script> 
     $(document).on('pageshow', function(){ 
      $("#searchinput").focus(); 
     }); 
     </script> 

     <script type="text/javascript"> 
     $(document).on('pageinit', function() { 
      $("#menu").mmenu({ 
       classes: "mm-light" 
      }); 
     }); 
     </script> 

     <script> 
     $("#menu").mmenu({ 
      searchfield: false, 
      counters: true 
     }); 

     $("#my-button").click(function() { 
      $("#menu").trigger("open"); 
     }); 
     </script> 

     <script type="text/javascript"> 
     $.fn.mmenu.debug = function(msg) { 
      console.log(msg); 
     }; 
     </script> 

     <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no"> 

     <div data-role="page" id="home"> 
      <div data-role="header" data-position="fixed" data-tap-toggle="false" data-theme=""> 
      <a href="index.html" data-transition="none">Back</a> 
      <input type="search" id="searchinput" name="search-mini" value="" data-mini="true" placeholder="Where?"/> 
     </div> 

     <div> 
      <nav id="menu"> 
       <ul> 
        <li id="infinitytest.html">Home<br><a>Test</a></li> 
        <li>My account</li> 
        <li>Setting</li> 
       </ul> 
      </nav> 
     </div> 

     <div> 
      <div role="main" class="ui-content scroll"> 
       <ul data-role="listview" id="list"></ul> 
      </div> 
     </div> 
    </div> 
</body> 
    </html>

来源

2014-10-19 Ben

我不能肯定这将解决你的问题，但你可以使用一些JavaScript来加载后自动刷新网页一次。以下是有关一个时间一个主题的链接将刷新：One time page refresh after first page load

代码：

window.onload = function() { 
    if(!window.location.hash) { 
     window.location = window.location + '#loaded'; 
     window.location.reload(); 
    } 
}

我希望我帮助

来源

2014-10-19 14:19:27 Oliver

感谢您的帮助，但我不认为我可以每次都重新加载页面，因为当我点击后退按钮时，如果我重新加载，我将不得不重新加载所有的远程内容。这将是一个问题。我只是想知道为什么它这样做。似乎没有其他人有这个问题。 – Ben 2014-10-19 14:37:12

首先，你的问题非常好，因为这是是因为JQuery Mobile在他的文档中没有提到的。

你应该阅读有关jQuery Mobile的这两篇文章，他们解释一下jQuery Mobile的工作原理，并加载内容：

（如果你使用jQuery走了工作手机我真的推荐你阅读这篇文章）。

我会继续这样的文章......你正在使用外部网页，你必须知道，jQuery Mobile的加载所有<head>部分只有一次在所有网站/应用，并做到这一点的index.html。所以你需要的所有代码都应该加载到index.html中。

我看到你使用了mmenu插件。我在应用程序中也使用它，所以我建议您的作品很好，将您需要的所有资源（css，js等）加载到您的index.html中。为了更好地管理你的代码，我建议你用你的所有函数创建一个JS文件。

来源

2014-10-19 14:55:22

嗨，感谢您的信息，我已阅读文档，现在我可以获得自动对焦的工作，但是mmenu仍然没有得到正确的格式。不太清楚为什么。我删除了第二个html上的所有js和css链接。并将它们组合到第一个html的头文件中。 – Ben 2014-10-19 18:17:11

最好的方法是在所有页面中包含所有的资源（JS和CSS），以及用于打开mmenu的JS代码。什么不与mmenu一起工作？ – 2014-10-20 00:15:32

为什么每个JS方法都有一个'

为什么Jquery Mobile代码需要刷新每个页面的工作？

回答

相关问题