爲什麼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方法都有一個'

11. Jquery photoswipe不工作需要刷新

12. jQuery Mobile頁面刷新機制

13. 使用jQuery Mobile刷新表單頁面

14. 在jquery mobile中刷新頁面

15. jQuery Mobile - 使用$ .mobile.changePage刷新頁面

16. 刷新頁面按鈕點擊jquery mobile

17. MVC ActionResult強制JQuery Mobile刷新頁面？

18. jQuery Mobile - 操縱DOM - 刷新頁面

19. 如何在jQuery Mobile中刷新頁面？

20. 爲什麼這個jquery函數每頁觸發一次刷新？

21. 爲什麼我需要刷新頁面來查看ng-show的新值

22. 爲什麼ofstream需要刷新？

23. qtsql-querymodel-editablesqlmodel：爲什麼需要刷新？

24. 爲什麼不刷新這個頁面刷新Opera框架？

25. jQuery Mobile刷新頁onclick

26. 如何使頁面刷新工作的客戶端代碼

27. 爲什麼jQuery代碼不工作？

28. 爲什麼JQuery代碼不工作？

29. 爲什麼setTimeout不工作在我的代碼？我需要可行的代碼）

30. jquery mobile pageshow event想要爲特定頁面工作

爲什麼Jquery Mobile代碼需要刷新每個頁面的工作？

回答

相關問題