除非刷新頁面，否則不會出現jQuery Mobile內容

除非我手動刷新頁面，否則我在JavaScript底部執行的代碼操作不會發生。有什麼辦法可以防止這種情況發生？如果不是，我怎樣才能動態刷新頁面，一旦它被加載？謝謝你的幫助！除非刷新頁面，否則不會出現jQuery Mobile內容

<!DOCTYPE html> 
<html> 
<head> 
    <meta charset="utf-8" /> 
    <title>Universal Travel Flights</title> 
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" /> 
    <link rel="stylesheet" href="css/my.css" /> 
    <script src="http://code.jquery.com/jquery-1.9.1.js"></script> 
    <script src="http://code.jquery.com/ui/1.10.2/jquery-ui.js"></script> 
    <script src="http://cdn.jquerytools.org/1.2.7/full/jquery.tools.min.js"></script> 
    <script src="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.js"></script> 
    <script type="text/javascript" src="js/form_validation.js"></script> 
    <script src="js/cordova-2.5.0.js"></script> 
</head> 
<body> 
    <div data-role="page" id="passenger"> 
     <div data-theme="a" data-role="header"> 
      <h3> 
      </h3> 
     </div> 
     <div data-role="content"> 
      <div data-role="navbar" data-iconpos="top"> 
       <ul> 
        <li> 
         <a href="index.html" data-transition="fade" data-theme="" class="ui-btn-active ui-state-persist"> 
          Book 
         </a> 
        </li> 
        <li> 
         <a href="deals.html" data-transition="fade" data-theme=""> 
          Deals 
         </a> 
        </li> 
        <li> 
         <a href="contact.html" data-transition="fade" data-theme=""> 
          Contact 
         </a> 
        </li> 
       </ul> 
      </div> 
      <form id="inputform" name="inputform" method="get" action="payment.html"> 
       <input type="hidden" name="flightID" id="flightID" /> 
       <div data-role="collapsible-set" id="passengers"> 

       </div> 
       <br/> 
       <input type="submit" value="Continue" data-theme="b" data-icon="arrow-r" data-iconpos="right"/> 
      </form> 
      <a data-role="button" data-transition="fade" data-theme="c" href="details.html" data-icon="arrow-l" data-iconpos="left"> 
       Back 
      </a> 
      </div> 
     <div data-theme="a" data-role="footer"> 
      <h3> 
      </h3> 
     </div> 
    </div> 
    <script> 
    $(document).on("pageinit", "#passenger", function() { 
     var arrArgs = location.search.substring(1).split("&"); 
     document.getElementById("flightID").value = arrArgs[2].substring(arrArgs[2].indexOf("=")+1); 
     var text = ""; 

     for(var i = 0; i < arrArgs[0].substring(arrArgs[0].indexOf("=")+1); i++) 
     { 
      text += "<div data-role='collapsible' data-collapsed='false'><h4>Adult</h4><div data-role='fieldcontain'><fieldset data-role='controlgroup' data-mini='true'>" + 
      "<input name='fname' id='fname' placeholder='First name*' value='' type='text' class='required'/></fieldset></div><div data-role='fieldcontain'><fieldset data-role='controlgroup' data-mini='true'>" + 
      "<input name='mname' id='mname' placeholder='Middle name' value='' type='text' /></fieldset></div><div data-role='fieldcontain'><fieldset data-role='controlgroup' data-mini='true'>"+ 
      "<input name='lname' id='lname' placeholder='Last name*' value='' type='text' class='required'/></fieldset></div><div data-role='fieldcontain'><select name='gender' data-mini='true' id='gender' class='required'>" + 
      "<option value=''>Gender*</option><option value='female'>Female</option><option value='male'>Male</option></select></div><div data-role='fieldcontain'><fieldset data-role='controlgroup' data-mini='true'>" + 
      "<input name='dob' id='dob' placeholder='Date of Birth (mm/dd/yyyy)*' value='' type='text' class='required'/></fieldset></div></div>"; 
     } 

     for(var i = 0; i < arrArgs[1].substring(arrArgs[1].indexOf("=")+1); i++) 
     { 
      text += "<div data-role='collapsible' data-collapsed='false'><h4>Child</h4><div data-role='fieldcontain'><fieldset data-role='controlgroup' data-mini='true'>" + 
      "<input name='fname' id='fname' placeholder='First name*' value='' type='text' class='required'/></fieldset></div><div data-role='fieldcontain'><fieldset data-role='controlgroup' data-mini='true'>" + 
      "<input name='mname' id='mname' placeholder='Middle name' value='' type='text' /></fieldset></div><div data-role='fieldcontain'><fieldset data-role='controlgroup' data-mini='true'><input name='lname' id='lname' placeholder='Last name*' value='' type='text' class='required'/>" + 
      "</fieldset></div><div data-role='fieldcontain'><select name='gender' data-mini='true' id='gender' class='required'><option value=''>Gender*</option><option value='female'>Female</option><option value='male'>Male</option></select>" + 
      "</div><div data-role='fieldcontain'><fieldset data-role='controlgroup' data-mini='true'><input name='dob' id='dob' placeholder='Date of Birth (mm/dd/yyyy)*' value='' type='text' class='required'/></fieldset></div></div>"; 
     } 

     document.getElementById("passengers").innerHTML = text; 

    }); 
    </script> 
</body> 
</html>

來源

2013-04-16 Sandra Leon

你如何導航到這個頁面，或者這是一個獨立/第一頁？ –

因爲'pageinit'在頁面顯示前被觸發一次。替換爲'.on（'pageshow'，function（）{your code}）;' – Omar

對於collapsibles $（'＃id'）。collapsible（）;和controlgroup $（'＃id'）。 controlgroup（'refresh'）' – Omar

好吧，我想我想通了......這個包裹你的腳本：

<script>$(document).ready(function(...Place all that code in here... 


); <<<you need to close it. 
</script>

應該這樣做。

來源

2013-04-16 03:46:03

我試過奧馬爾和弗蘭克的建議，我仍然需要刷新。我認爲Gajotres有一點，我應該使用jQuery而不是Javascript，這對我來說更容易... –

對不起，親愛的...沒有法律反對混合，但對於故障排除，它會更好地爲我們的疑難解答。祝你好運！ –

除非刷新頁面，否則不會出現jQuery Mobile內容

回答

相關問題