为什么 Jquery Mobile 代码需要刷新每个页面才能正常工作？答案

【问题标题】：Why Jquery Mobile code need refreshing for each page to work?为什么 Jquery Mobile 代码需要刷新每个页面才能正常工作？
【发布时间】：2014-12-14 14:08:24
【问题描述】：

我在 JQuery Mobile 上遇到了一些问题，我对此很陌生，所以我的问题可能看起来有点幼稚。

我有 2 页，1 是 index.html 然后我有一个 search.html，我有两个 html 的 sidemenu 插件。我为search.html 做了自动对焦。当我单击一个按钮从索引转到搜索时。我的侧边菜单没有格式化，自动对焦也不起作用。只有当我刷新页面时它才有效。我在每个 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>

【问题讨论】：

标签： jquery html jquery-mobile

【解决方案1】：

首先，您的问题非常好，因为这是 JQuery Mobile 在他的文档中没有说明的问题。

您应该阅读这两篇关于 JQuery Mobile 的文章，它们解释了 JQuery Mobile 的工作原理和加载内容：

（如果您使用 JQuery Mobile 工作，我真的建议您阅读这篇文章）。

我将继续这篇文章...您正在使用外部页面，您必须知道 JQuery Mobile 在所有网站/应用程序中只加载所有 <head> 部分，并在index.html。所以你需要的所有代码都应该加载到index.html。

我看到您使用的是 mmenu 插件。我也在应用程序中使用它，所以我对您的建议是在您的index.html 中加载您需要的所有资源（css、js 等）。为了更好地管理您的代码，我建议您制作一个包含所有功能的 JS 文件。

【讨论】：

您好，感谢您提供的信息，我阅读了文档，现在我可以让自动对焦正常工作，但是 mmenu 仍然没有输入正确的格式。不太清楚为什么。我在第二个 html 上删除了所有指向 js 和 css 的链接。并将它们分组在第一个 html 的标题中。
最好的方法是在所有页面中包含所有资源（JS和CSS），以及打开菜单的JS代码。什么不适用于 mmenu？
为什么每个 JS 方法都有一个 <script> 块？我看你有各种菜单的方法，为什么？也许这就是使您的 mmenu 无法正常工作的原因，因为最后一种方法可能会覆盖其他方法。我认为您应该只有一种方法来设置 mmenu 的选项和配置。
谢谢，我会试试看！我不太确定原因，因为这组代码适用于第一个 html，我只是将其复制并粘贴到第二个 html 上，然后将所有内容移动到正文中。

【解决方案2】：

我不确定这会解决您的问题，但您可以使用一些 javascript 在加载后自动刷新网页一次。这是一个关于一次刷新的话题的链接：One time page refresh after first page load

代码：

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

希望能帮到你

【讨论】：

感谢您的帮助，但我不认为我可以每次都重新加载页面，因为当我单击后退按钮时，如果我重新加载，我也必须重新加载所有远程内容。这将是一个问题。我只是想知道为什么会这样。好像没有其他人有这个问题。