Question

我在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>

Answer 1

首先，你的问题非常好，因为这是由于JQuery Mobile在他的文档中没有说出来的。

你应该阅读这两篇关于JQuery Mobile的文章，他们解释了JQuery Mobile如何工作和加载内容：

JQuery Mobile Architecture
How JQuery Mobile handling the codes

（如果你已经和JQuery Mobile合作了，我真的建议你阅读这篇文章）。

我将恢复这些文章...您正在使用外部网页，您必须知道 JQuery Mobile在所有网站/应用中加载所有<head>部分，并且它在 index.html 中。因此，您需要的所有代码都应该加载到index.html。

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

Answer 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();
  }
}

我希望我帮助

为什么Jquery移动代码需要刷新每个页面才能工作？

2 个答案: