Question

在我的jQuery移动应用程序中，我使用了数据预取来预取Page1，以提高性能，因为每个页面都需要时间打开并在点击链接后显示给用户，问题是当我点击在Page1链接上，一旦应用程序被启动，Page1的pageinit / pagecreate事件没有被执行，在这种情况下我从数据库返回数据以显示在弹出列表视图中，但是当我回到主页然后单击Page1链接a获得执行的Pageinit事件和返回的数据。

为什么Pageinit / pagecreate事件在预取页面时不起作用？我怎么解决这个问题？因为在Pagecreate或Pageinit事件中返回数据非常重要

我遇到的另一个问题是，当我从Page1回到主页时，主页链接变得不起作用我单击Page1链接但是Page1没有打开，即使我多次单击链接它也没有打开Page1 ..我怎么能解决这个问题？请帮帮我

主页

<div data-role="page" id="home">
<div data-role="header" data-position="fixed">
     <h1>Header - Home</h1>

</div>
<div data-role="content"></div>
<a href="Page1.html" data-transition="none"  class="ui-btn"  data-role="button" data-prefetch="true" >Page1</a>
 <a href="Page2.html" data-transition="none"  class="ui-btn"  data-role="button" data-prefetch="true" >Page2</a>

<div data-role="footer" data-position="fixed">
     <h1>Footer</h1>

     </div>
 </div>

第1页

<div data-role="page" id="Page1">
     <div data-role="header" data-position="fixed">
       <h1>Header - Page 1</h1>

      </div>
      <div data-role="content">

       <a href="MyPOPUP" data-rel="popup" class="ui-btn  ui-corner-all" data-   inline="true">Show Popup</a>

       </div>
       <div data-role="popup" id="MyPOPUP" data-position-to="window" data-  corners="false" data- overlay-theme="a" data-dismissible="false">
       <div data-role="header" data-theme="a">

           <div style="text-align:center;float:center;padding-top:11px;">
           <font size="6px" color="white">Employees</font>

           </div>
        </div>
       <div id="scrollContent" data-role="content">
      <ul data-role="listview" id="EmpList" style="margin: 0 !important;">

      </ul>
     </div>
   </div>
</div>

Page1.js

  document.addEventListener('deviceready', onDeviceReady, false);


  function   onDeviceReady() 
  {

       $('#Page1').on('pageinit',function(event){


           db.transaction(getAllEmployees, transactionError); 

       });

   }

  function getAllEmployees(tx)
  {
      tx.executeSql('SELECT EmpName,Salary,Gender,Country  FROM  Employee',           [],getEmpSuccess,transactionError);

  }

 function  getEmpSuccess(tx,result)
 {    

     if (result.rows.length)
     {


         for(var i=0;i< result.rows.length; i++)
         {     
            var row = result.rows.item(i);
            $('#EmpList').append('<li><a href="#">' +'<font class="line1">' + '         '+row['EmpName']+ '</font>' +'<font size="6px" class="line2" > '+ row['Gender']  +'</font>'+'<font size="6px" class="line3"> ' +row['Country']+' </font>'+'<font  size="6px" class="line4"> '+ row['Salary']+'</font><BR> '+'</a><a href="#" >Delete</a></li>' );

                                                                                                                                                                                                                    }
 } 
 $('#EmpList').listview('refresh');
}

在jQuery mobile 1.4.0中使用data-prefetch

0 个答案: