我正在使用jQuery Mobile，並且在用戶單擊家中的某個按鈕後，我想將瀏覽器重定向到另一個頁面。要做到這一點，我寫道：更改頁面後不會觸發Pageshow

$.mobile.changePage("album-search-results.html",{ 
       data:{area:searchArea, value:searchValue}, 
       transition: "pop" 
      });

，它工作正常，它加載正確的頁面，它甚至把該URL正確的價值觀。不幸的是，頁面顯示事件沒有被觸發：

<!DOCTYPE html> 
<html> 
<head> 


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

    <script src="http://code.jquery.com/jquery-1.8.2.min.js"></script> 
    <script src="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.js"></script> 
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.css" /> 
</head> 

<body> 
    <div data-role = "page" data-theme = "d" id = "SearchResults"> 

     <div data-role = "header"> 
      <h1>Aggregator</h1> 
     </div> 

     <div data-role = "content"> 

     </div> 
    </div> 

    <script type="text/javascript"> 
     $("#SearchResults").on("pageshow",function(event, ui){ 
      console.log(ui.prevPage); 

     }); 

    </script> 
</body> 
</html>

當我從前一頁加載該頁面時，控制檯始終爲空。哪裏不對？感謝

來源

2013-04-18 user1012480

我以爲pageshow僅是爲目標文檔的事件？ https://developer.mozilla.org/en-US/docs/Web/Events/pageshow – NoBugs

解決方案

解決方法很簡單，移動腳本塊頁面DIV中。在你的情況下，腳本塊被丟棄。基本上改變它是這樣的：

來自：

<body> 
    <div data-role = "page" data-theme = "d" id = "SearchResults"> 

     <div data-role = "header"> 
      <h1>Aggregator</h1> 
     </div> 

     <div data-role = "content"> 

     </div> 
    </div> 

    <script type="text/javascript"> 
     $("#SearchResults").on("pageshow",function(event, ui){ 
      console.log(ui.prevPage); 

     }); 

    </script> 
</body>

到：

<body> 
    <div data-role="page" data-theme="d" id="SearchResults"> 
     <div data-role = "header"> 
      <h1>Aggregator</h1> 
     </div> 
     <div data-role = "content"> 

     </div> 
     <script> 
      $(document).on("pageshow","#SearchResults",function(event, ui){ 
       console.log(ui.prevPage); 
      }); 
     </script>  
    </div> 
</body>

實施例：

的index.html

<!DOCTYPE html> 
<html> 
    <head> 
     <title>jQM Complex Demo</title> 
     <meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; minimum-scale=1.0; user-scalable=no; target-densityDpi=device-dpi"/> 
     <link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" /> 
     <script src="http://www.dragan-gaic.info/js/jquery-1.8.2.min.js"></script>  
     <script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>  
     <script> 
      $(document).on('click', '#change-page', function(){  
       $.mobile.changePage("album-search-results.html",{ 
        data:{area:"asda", value:"1"}, 
        transition: "pop" 
       }); 
      });     
     </script> 
    </head> 
    <body> 
     <div data-role="page" id="index"> 
      <div data-theme="a" data-role="header"> 
       <h3> 
        First Page 
       </h3> 
       <a href="#second" class="ui-btn-right">Next</a> 
      </div> 

      <div data-role="content"> 
       <a data-role="button" id="change-page">Change Page</a> 
      </div> 

      <div data-theme="a" data-role="footer" data-position="fixed"> 

      </div> 
     </div>  
    </body> 
</html>

專輯 - 搜索results.html

<!DOCTYPE html> 
<html> 
<head> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <script src="http://code.jquery.com/jquery-1.8.2.min.js"></script> 
    <script src="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.js"></script> 
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.css" /> 
</head> 
    <body> 
     <div data-role="page" data-theme="d" id="SearchResults"> 
      <div data-role = "header"> 
       <h1>Aggregator</h1> 
      </div> 
      <div data-role = "content"> 

      </div> 
      <script> 
       $(document).on("pageshow","#SearchResults",function(event, ui){ 
        console.log(ui.prevPage); 
       }); 
      </script>  
     </div> 
    </body> 
</html>

來源

2013-04-18 13:09:06 Gajotres

謝謝。幫助了我很多！ – KapteinMarshall

移動div內的腳本就像魅力一樣工作。謝謝！！！ – Eminem

更改頁面後不會觸發Pageshow

回答

解決方案

實施例：

相關問題