加載後刷新jquery移動頁面

我有兩頁A和B：
A - >登錄頁面。
B - >包含HTML元素和iScoll「pull refreash」代碼。
evrey事工作正常，但當我從登錄到B不會出現iScroll內容，如果我刷新頁面B中的內容出現前後，工作好，這是iScroll代碼：加載後刷新jquery移動頁面

<script type="text/javascript"> 

    var myScroll, 
    pullDownEl, pullDownOffset, 
    generatedCount = 0; 

    function pullDownAction() { 
     setTimeout(function() {  
      var el, li, i; 
      el = document.getElementById('thelist'); 

      var returnedLIs = ""; 
      for (i = 0; i < 3; i++) { 

       returnedLIs += '<li><a href="#" data-ajax="false" class="PDFLink"></a></li>'; 

      } 
      $(returnedLIs).prependTo($('#thelist')); 
      myScroll.refresh(); 
     }, 0); 
    } 


    function loaded() { 
     pullDownEl = document.getElementById('pullDown'); 
     pullDownOffset = pullDownEl.offsetHeight; 

     myScroll = new iScroll('wrapper', { 
      hideScrollbar:false, 
      useTransition: true, 
      topOffset: pullDownOffset, 
      onRefresh: function() { 
       if (pullDownEl.className.match('loading')) { 
        pullDownEl.className = ''; 
        pullDownEl.querySelector('.pullDownLabel').innerHTML = 'Pull down to refresh...'; 
       } 

      }, 
      onScrollMove: function() { 
       if (this.y > 5 && !pullDownEl.className.match('flip')) { 
        pullDownEl.className = 'flip'; 
        pullDownEl.querySelector('.pullDownLabel').innerHTML = 'Release to refresh...'; 
        this.minScrollY = 0; 
       } else if (this.y < 5 && pullDownEl.className.match('flip')) { 
        pullDownEl.className = ''; 
        pullDownEl.querySelector('.pullDownLabel').innerHTML = 'Pull down to refresh...'; 
        this.minScrollY = -pullDownOffset; 
       } 
           }, 
      onScrollEnd: function() { 
       if (pullDownEl.className.match('flip')) { 
        pullDownEl.className = 'loading'; 
        pullDownEl.querySelector('.pullDownLabel').innerHTML = 'Loading...'; 
        pullDownAction(); // Execute custom function (ajax call?) 
       } 

      } 
     }); 

     setTimeout(function() { document.getElementById('wrapper').style.left = '0'; }, 800); 
    } 

    document.addEventListener('touchmove', function (e) { e.preventDefault(); }, false); 
    document.addEventListener('DOMContentLoaded', function() { setTimeout(loaded, 200); }, false); 


</script>

任何一個可以幫助,,,

編輯：<head>節A.aspx - >登錄頁：

<head runat="server"> 
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0"> 
    <meta name="apple-mobile-web-app-capable" content="yes"> 
    <meta name="apple-mobile-web-app-status-bar-style" content="black"> 
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.css" /> 
    <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script> 
    <script src="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.js"></script> 
    <link href="css/Site.css" rel="stylesheet" type="text/css" /> 

    <!-- Validition Library --> 
    <script src="Validate/jquery.validVal-4.3.3.js" type="text/javascript"></script> 
</head>

編輯：<head>節B.aspx：

<head runat="server"> 

    <%--PULL TO REFREASH--%> 
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0"> 
    <meta name="apple-mobile-web-app-capable" content="yes"> 
    <meta name="apple-mobile-web-app-status-bar-style" content="black"> 
    <%--PULL TO REFREASH--%> 

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

    <%--PULL TO REFREASH--%> 
    <script type="text/javascript" src="jq/iscroll.js"></script> 
    <%--PULL TO REFREASH--%> 

    <link href="css/Site.css" rel="stylesheet" type="text/css" /> 

<%--pull to refresh--%> 

<script type="text/javascript"> 



    var myScroll, 
    pullDownEl, pullDownOffset, 
    generatedCount = 0; 

    function pullDownAction() { 
     setTimeout(function() {  
      var el, li, i; 
      el = document.getElementById('thelist'); 

      var returnedLIs = ""; 
      for (i = 0; i < 3; i++) { 

       returnedLIs += '<li><a href="#" data-ajax="false" class="PDFLink"></a></li>'; 

      } 
      $(returnedLIs).prependTo($('#thelist')); 
      myScroll.refresh(); 
     }, 0);  
    } 


    function loaded() { 
     pullDownEl = document.getElementById('pullDown'); 
     pullDownOffset = pullDownEl.offsetHeight; 

     myScroll = new iScroll('wrapper', { 
      hideScrollbar:false, 
      useTransition: true, 
      topOffset: pullDownOffset, 
      onRefresh: function() { 
       if (pullDownEl.className.match('loading')) { 
        pullDownEl.className = ''; 
        pullDownEl.querySelector('.pullDownLabel').innerHTML = 'Pull down to refresh...'; 
       } 

      }, 
      onScrollMove: function() { 
       if (this.y > 5 && !pullDownEl.className.match('flip')) { 
        pullDownEl.className = 'flip'; 
        pullDownEl.querySelector('.pullDownLabel').innerHTML = 'Release to refresh...'; 
        this.minScrollY = 0; 
       } else if (this.y < 5 && pullDownEl.className.match('flip')) { 
        pullDownEl.className = ''; 
        pullDownEl.querySelector('.pullDownLabel').innerHTML = 'Pull down to refresh...'; 
        this.minScrollY = -pullDownOffset; 
       } 

      }, 
      onScrollEnd: function() { 
       if (pullDownEl.className.match('flip')) { 
        pullDownEl.className = 'loading'; 
        pullDownEl.querySelector('.pullDownLabel').innerHTML = 'Loading...'; 
        pullDownAction(); // Execute custom function (ajax call?) 
       } 
      } 
     }); 

     setTimeout(function() { document.getElementById('wrapper').style.left = '0'; }, 800); 
    } 

    document.addEventListener('touchmove', function (e) { e.preventDefault(); }, false); 
    document.addEventListener('DOMContentLoaded', function() { setTimeout(loaded, 200); }, false); 


</script> 
<%--pull to refresh--%> 
</head>

來源

2013-05-07 Momo88

'$（」 [data-role = listview]'）。listview（'refresh'）'附加條目後。 – Omar 2013-05-07 09:09:45

仍然不起作用,,,, – Momo88 2013-05-07 09:17:00

它應該在這個'$（returnedLIs）.prependTo（$（'＃thelist'））;'，try'$（'＃thelist'）。listview（'refresh'）' 。 – Omar 2013-05-07 09:22:21

讓我解釋一下你正在發生什麼。

你有2個獨立的HTML頁面。每個頁面都有一個帶有JavaScript內容的HEAD。

你的問題涉及到jQuery Mobile如何處理頁面加載。只有第一頁完全加載。當下一頁即將被加載時，它的主體被加載到DOM中，並且其餘部分被丟棄。這是因爲第一頁已經在DOM內部了，HEAD的內部沒有任何意義。

這可以固定在幾個方面：

移動你的第二個頁面的JavaScript到第一頁的HEAD
移動的JavaScript第二頁BODY
使網頁過渡當你的第二頁將這些屬性添加到您的鏈接中：data-ajax =「false」或rel =「external」。只是減弱，在這種情況下的轉換不會工作因此要堅持解決方案1或2

也看看，我有這方面的例子+另一個偉大的答案：Why I have to put all the script to index.html in jquery mobile

來源

2013-05-07 13:42:29 Gajotres

加載後刷新jquery移動頁面

回答

相關問題