加载后刷新jquery移动页面

Question

我有两页，A和B：
->登录页面。
B->包含HTML元素和iScoll“拉动刷新”代码。
evrey的东西工作正常，但是当我从A登录到B时，iScroll内容未出现，如果我确实刷新了页面B，则该内容又出现并正常工作，这是iScroll代码：

<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>

谁能帮忙，

编辑 ：A.aspx的<head>部分->登录页面：

<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>

编辑 ：B.aspx的<head>部分：

<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>

Answer 1

让我解释一下发生了什么。

您有2个单独的HTML页面。 每个页面都有一个包含javascript内容的HEAD。

您的问题涉及jQuery Mobile如何处理页面加载。 仅第一页已完全加载。 当仅要加载下一页时，其主体将加载到DOM中，其余的将被丢弃。 这是因为首页已经在DOM内，而不必在HEAD内。

这可以通过几种方法解决：

• 将第二页javascript移至第一页的HEAD
• 将您的第二页javascript移至第二页BODY
• 进行页面转换时，请将以下属性添加到链接中： data-ajax =“ false”或rel =“ external” 。 只是需要，在这种情况下过渡将无法正常工作，因此请遵循解决方案1或2。

还请看一下，我对这个+示例还有另一个很好的答案： 为什么我必须将所有脚本放入jquery mobile中的index.html