Jquery手機：如何重新加載/刷新內部頁面

Question

我在容器頁面（即page.html）中有2個頁面（即page_1和page_2）。在第一頁，我只有一個按鈕，如果你點擊那麼它將導航到第二頁。當你從第二頁返回到第一頁並且再次點擊按鈕以導航到第二頁時，此時我想重新加載/刷新頁面。我試過但我沒有得到請任何人都可以幫助我。

下面的代碼：

<div data-role="page" id="page_1" >  

     <div data-role="content" id="contentlogin">   
      <a href="#" onclick="refresh();" data-role="button" id="login">Navigation</a>       
     </div>    
    </div> 

    <div data-role="page" id="page_2" >  

     <div data-role="content" id="contentlogin">   
      //Some Form elements are there  
     </div>    
    </div> 

<script type="text/javascript"> 
function refresh() 
{            
      $.mobile.changePage($("#page_2"), {transition: "pop",reloadPage: true}); 
}  
</script> 

感謝

Answer 1

你可以嘗試這樣的事：

• http://jsfiddle.net/sJdfy/4/

JS

$('#page_3').live('pageshow',function(event, ui) { 
    // refresh specific element 
    $('#refresh').val(''); 
}); 

$('#page_2').live('pageshow',function(event, ui) { 
    // refresh all elements 
    var allInputs = $(':input'); 
    allInputs.val(''); 
}); 

HTML

<div data-role="page" id="page_1" >  
    <div data-role="content" name="contentlogin">   
     <a href="#page_2" data-role="button" id="login">Navigate to page 2</a> 
     <a href="#page_3" data-role="button">Navigate to page 3</a>  
     Yeah Page 1   
    </div>    
</div> 

<div data-role="page" id="page_2" > 
    <div data-role="content" name="contentlogin"> 
     <a href="#page_1" data-role="button">Navigate to page 1</a>  
     <!-- Some Form elements are there --> 
     Hello we are on Page 2<br />Refresh All Elements<br /><br /> 
     <label for="basic1">Text Input 1 (Refresh):</label> 
     <input type="text" name="name1" id="basic1" value="" /> 
     <label for="refresh1">Text Input 2 (Refresh):</label> 
     <input type="text" name="name21" id="refresh1" value="" /> 
     <br /> Enter in some values, Navigate to Page 1 and back to Page 2  
    </div>    
</div> 

<div data-role="page" id="page_3" > 
    <div data-role="content" name="contentlogin"> 
     <a href="#page_1" data-role="button">Navigate to page 1</a>  
     <!-- Some Form elements are there --> 
     Hello we are on Page 3<br />Refresh Specific Elements<br /><br /> 
     <label for="basic">Text Input 1:</label> 
     <input type="text" name="name" id="basic" value="" /> 
     <label for="refresh">Text Input 2 (Refresh):</label> 
     <input type="text" name="name2" id="refresh" value="" /> 
     <br /> Enter in some values, Navigate to Page 1 and back to Page 3 
    </div>    
</div>