blocks|key|185471|text|我也有同样的问题。我尝试了所有的方法，最终得到了解决方案。我发现错误主要存在于浏览器内部。因此，我将pushStateEnabled的配置设置为false。我是通过执行以下操作来完成的，添加了这个脚本。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|185472|<script+type="text/javascript">
$(document).bind("mobileinit",+function(){
$.mobile.pushStateEnabled+=+false;
});
</script>|code-block|syntax|javascript|185473|应该在调用jquery-mobile脚本之前添加它，有关更多信息，可以在JQuery+description上查看它|offset|length|185474|它解决了问题，不再跳过头来。|185475|entityMap|0|LINK|mutability|MUTABLE|url|http://jquerymobile.com/demos/1.1.1/docs/pages/page-navmodel.html^0|0|0|10|I|0|0|0^^$0|@$1|2|3|4|5|6|7|U|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|V|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|W|8|@]|9|@$I|X|J|Y|1|Z]]|A|$]]|$1|K|3|L|5|6|7|10|8|@]|9|@]|A|$]]|$1|M|3|-4|5|6|7|11|8|@]|9|@]|A|$]]]|N|$O|$5|P|Q|R|A|$S|T]]]]

<p>I was having the same issue. And I tried everything, I finally end with the solution. What I found was the error was principally within the browser. So I set the configuration of the pushStateEnabled as false. I did it by doing the following, adding this script. </p>

<pre><code>&lt;script type="text/javascript"&gt;
$(document).bind("mobileinit", function(){
$.mobile.pushStateEnabled = false;
});
&lt;/script&gt;
</code></pre>

<p>It should be add before the jquery-mobile script is call, for more information you could see it on <a href="http://jquerymobile.com/demos/1.1.1/docs/pages/page-navmodel.html">JQuery description</a></p>

<p>And it solved the problem no more jumping back. </p>


blocks|key|403702|text|经过几周的努力寻找解决方案后，我最终修改了JQM库，禁用了一个接一个的页面转换。这不是一个好的解决方案，但这是我唯一能做的事情。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|403703|我在$.mobile.changePage和锚点链接上都得到了页面跳转。我使用了幻灯片转场，但移除它并不能解决问题。将pushStateEnabled设置为false也不起作用。跳转发生在所有设备和浏览器上(无论如何，我都测试过了)。|403704|下面是我对JQM库(v1.3.2)所做的操作。|403705|在定义$.mobile.changePage函数之前，我添加了：|403706|var+justChangedPage+=+false;|code-block|syntax|javascript|403707|然后在函数中有一行代码：|403708|if+(+pbcEvent.isDefaultPrevented())+{
++++return;
}|403709|我改成了：|403710|if+(+pbcEvent.isDefaultPrevented()+%7C%7C+justChangedPage)+{
++++return;
}|403711|然后紧跟在$.mobile.changePage函数的这一部分之后：|403712|if+(+toPage[+0+]+===+$.mobile.firstPage[+0+]+&&+!settings.dataUrl+)+{
++++settings.dataUrl+=+documentUrl.hrefNoHash;
}|403713|我补充道：|403714|justChangedPage+=+true;
setTimeout(function()+{
++++justChangedPage+=+false;
},+500);|403715|(把它放在函数的前面并不起作用--所有这些东西在一个页面转换中执行不止一次。半秒似乎是防止页面跳转的最小超时。)|403716|我希望这能帮助一些人，即使它是一个黑客……|403717|entityMap^0|0|0|0|0|0|0|0|0|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|18|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|19|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|1A|8|@]|9|@]|A|$]]|$1|F|3|G|5|6|7|1B|8|@]|9|@]|A|$]]|$1|H|3|I|5|J|7|1C|8|@]|9|@]|A|$K|L]]|$1|M|3|N|5|6|7|1D|8|@]|9|@]|A|$]]|$1|O|3|P|5|J|7|1E|8|@]|9|@]|A|$K|L]]|$1|Q|3|R|5|6|7|1F|8|@]|9|@]|A|$]]|$1|S|3|T|5|J|7|1G|8|@]|9|@]|A|$K|L]]|$1|U|3|V|5|6|7|1H|8|@]|9|@]|A|$]]|$1|W|3|X|5|J|7|1I|8|@]|9|@]|A|$K|L]]|$1|Y|3|Z|5|6|7|1J|8|@]|9|@]|A|$]]|$1|10|3|11|5|J|7|1K|8|@]|9|@]|A|$K|L]]|$1|12|3|13|5|6|7|1L|8|@]|9|@]|A|$]]|$1|14|3|15|5|6|7|1M|8|@]|9|@]|A|$]]|$1|16|3|-4|5|6|7|1N|8|@]|9|@]|A|$]]]|17|$]]

<p>After trying for weeks to find a solution to this, I ended up doctoring the JQM library to disable page transitions one right after another. It's not a good solution, but it's the only thing I could get to work.</p>

<p>I was getting pages jumping back on both $.mobile.changePage and on anchor links. I used the slide transition, but removing it did not fix the problem. Setting pushStateEnabled to false did not work either. The jumps were happening on all devices and browsers (that I tested, anyway).</p>

<p>So here's what I did to the JQM library (v1.3.2).</p>

<p>Before the $.mobile.changePage function is defined, I added:</p>

<pre><code>var justChangedPage = false;
</code></pre>

<p>Then within the function there's a line that goes:</p>

<pre><code>if ( pbcEvent.isDefaultPrevented()) {
    return;
}
</code></pre>

<p>which I changed to:</p>

<pre><code>if ( pbcEvent.isDefaultPrevented() || justChangedPage) {
    return;
}
</code></pre>

<p>Then right after this part of the $.mobile.changePage function:</p>

<pre><code>if ( toPage[ 0 ] === $.mobile.firstPage[ 0 ] &amp;&amp; !settings.dataUrl ) {
    settings.dataUrl = documentUrl.hrefNoHash;
}
</code></pre>

<p>I added:</p>

<pre><code>justChangedPage = true;
setTimeout(function() {
    justChangedPage = false;
}, 500);
</code></pre>

<p>(Putting that earlier in the function didn't work -- all that stuff executes more than once within a single page transition. And half a second seemed to be the minimum timeout that prevented the page jumps.)</p>

<p>I hope this helps someone even if it is a hack...</p>


blocks|key|185588|text|我遇到了完全相同的行为，似乎很少有人有同样的问题。一开始我以为是jQuery移动库造成的。后来，我设法找到了问题的来源，这是我自己的代码中的一个bug。我制作了一个演示来解释这个问题。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|185589|http://jsfiddle.net/pengyanb/6zvpgd4p/10/|offset|length|185590|希望这能为有同样问题的人提供提示。|185591|​|185592|$(document).on('pagebeforeshow',+'#page2',+function(){
++++console.log('Page2+before+show');
++++var+htmlGeneratedOnTheFly+=+'<ul+data-role="listview"+data-inset="true">';
++++for(var+i=0;+i<4;+i%2B%2B)
++++{
++++++++htmlGeneratedOnTheFly+%2B=+'<li><a>Random+html+element</a></li><li+data-role="list-divider"></li>';
++++}
++++htmlGeneratedOnTheFly+%2B=+'</div>';
++++$('#page2UiContent').empty();
++++$('#page2UiContent').append(htmlGeneratedOnTheFly);
++++$('#page2UiContent').trigger('create');
++++
+++
++++//////////////////////////////////////////////////
++++//The+following+section+is+where+the+bug+is+generated.+
++++//Each+on+"page2+before+show+event"+will+add+a+OK+Button+click+handler.+
++++//The+handlers+never+get+cleared.
++++//More+and+more+handler+is+added+to+the+Page2+OK+button+as+pages+going+back+and+forth.
++++//Open+the+browser's+console+window+to+see+multiple+"Page+2+OK+Button+clicked!!!"+lines+on+one+button+click.+
++++//To+fix+the+bug,+move+the+following+section+out+of+the+$(document).on('pagebeforeshow',+'#page2',+function(){});
++++//////////////////////////////////////////////////
++++$('#page2OkButton').click(function(){
++++++++console.log("Page+2+OK+Button+clicked!!!");
++++++++$.mobile.changePage('#page1',+{transition:"flip"});
++++});
++++//////////////////////////////////////////////
++++//////////////////////////////////////////////
});|code-block|syntax|javascript|185593|<link+href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.css"+rel="stylesheet"/>
<script+src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.js"></script>
<script+src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div+data-role="page"+id="page1"+data-theme="a">
++++<div+data-role="header"+data-position="fixed">
++++++++<h5>Demo+Page+1</h5>
++++</div>
++++<div+data-role="main"+class="ui-content">
++++++++<h2>jQuery+mobile+changepage+jumps+back+to+old+page+demo</h2>
++++++++<p>Click+"Go+To+Page+2"+button+to+go+to+page2</p>
++++++++<p>On+Page2+click+Ok+Button+to+come+back+to+page1</p>
++++++++<p>Keeping+going+back+forth+between+two+pages+for+few+times.</p>
++++++++<p>Eventually,+you+will+find+that+clicked+on+"Go+To+Page2"+button+to+flip+to+Page2+but+it+soon+jumps+back+to+page1+automatically.+</p>
++++++++<h2>Please+read+the+comments+in+the+javascript+for+explaination</h2>
++++++++<a+href="#page2"+data-transition="flip"+class="ui-btn+ui-icon-carat-r+ui-btn-icon-right">Go+To+Page+2</a>
++++</div>
</div>

<div+data-role="page"+id="page2"+data-theme="a">
++++<div+data-role="header"+data-position="fixed">
++++++++<h5>Demo+Page+2</h5>
++++</div>
++++<div+id="page2UiContent"+data-role="main"+class="ui-content">
++++</div>
++++<div+data-role="footer"+data-position="fixed"+style="text-align:center;">
++++++++<div+data-role="navbar">
++++++++++++<ul>
++++++++++++++++<li><a+id="page2OkButton"+class="ui-btn+ui-icon-check+ui-btn-icon-left">OK</a></li>
++++++++++++</ul>
++++++++</div>
++++</div>
</div>|185594|185595|entityMap|0|LINK|mutability|MUTABLE|url^0|0|0|15|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|Y|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|Z|8|@]|9|@$D|10|E|11|1|12]]|A|$]]|$1|F|3|G|5|6|7|13|8|@]|9|@]|A|$]]|$1|H|3|I|5|6|7|14|8|@]|9|@]|A|$]]|$1|J|3|K|5|L|7|15|8|@]|9|@]|A|$M|N]]|$1|O|3|P|5|L|7|16|8|@]|9|@]|A|$M|N]]|$1|Q|3|I|5|6|7|17|8|@]|9|@]|A|$]]|$1|R|3|-4|5|6|7|18|8|@]|9|@]|A|$]]]|S|$T|$5|U|V|W|A|$X|C]]]]

<p>I encountered exactly the same behaviour and it seems that few people are having the same issue. At first I thought it is caused by jQuery mobile library. Later on, I manage to find where the problem came from and it is a bug in my own code. 
I made a demo to explain the issue.</p>

<p><a href="http://jsfiddle.net/pengyanb/6zvpgd4p/10/" rel="nofollow">http://jsfiddle.net/pengyanb/6zvpgd4p/10/</a></p>

<p>Hopefully, this can be hint for people having the same problem.</p>

<p><div class="snippet" data-lang="js" data-hide="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>$(document).on('pagebeforeshow', '#page2', function(){
    console.log('Page2 before show');
    var htmlGeneratedOnTheFly = '&lt;ul data-role="listview" data-inset="true"&gt;';
    for(var i=0; i&lt;4; i++)
    {
        htmlGeneratedOnTheFly += '&lt;li&gt;&lt;a&gt;Random html element&lt;/a&gt;&lt;/li&gt;&lt;li data-role="list-divider"&gt;&lt;/li&gt;';
    }
    htmlGeneratedOnTheFly += '&lt;/div&gt;';
    $('#page2UiContent').empty();
    $('#page2UiContent').append(htmlGeneratedOnTheFly);
    $('#page2UiContent').trigger('create');
    
   
    //////////////////////////////////////////////////
    //The following section is where the bug is generated. 
    //Each on "page2 before show event" will add a OK Button click handler. 
    //The handlers never get cleared.
    //More and more handler is added to the Page2 OK button as pages going back and forth.
    //Open the browser's console window to see multiple "Page 2 OK Button clicked!!!" lines on one button click. 
    //To fix the bug, move the following section out of the $(document).on('pagebeforeshow', '#page2', function(){});
    //////////////////////////////////////////////////
    $('#page2OkButton').click(function(){
        console.log("Page 2 OK Button clicked!!!");
        $.mobile.changePage('#page1', {transition:"flip"});
    });
    //////////////////////////////////////////////
    //////////////////////////////////////////////
});</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;link href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.css" rel="stylesheet"/&gt;
&lt;script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.js"&gt;&lt;/script&gt;
&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
&lt;div data-role="page" id="page1" data-theme="a"&gt;
    &lt;div data-role="header" data-position="fixed"&gt;
        &lt;h5&gt;Demo Page 1&lt;/h5&gt;
    &lt;/div&gt;
    &lt;div data-role="main" class="ui-content"&gt;
        &lt;h2&gt;jQuery mobile changepage jumps back to old page demo&lt;/h2&gt;
        &lt;p&gt;Click "Go To Page 2" button to go to page2&lt;/p&gt;
        &lt;p&gt;On Page2 click Ok Button to come back to page1&lt;/p&gt;
        &lt;p&gt;Keeping going back forth between two pages for few times.&lt;/p&gt;
        &lt;p&gt;Eventually, you will find that clicked on "Go To Page2" button to flip to Page2 but it soon jumps back to page1 automatically. &lt;/p&gt;
        &lt;h2&gt;Please read the comments in the javascript for explaination&lt;/h2&gt;
        &lt;a href="#page2" data-transition="flip" class="ui-btn ui-icon-carat-r ui-btn-icon-right"&gt;Go To Page 2&lt;/a&gt;
    &lt;/div&gt;
&lt;/div&gt;

&lt;div data-role="page" id="page2" data-theme="a"&gt;
    &lt;div data-role="header" data-position="fixed"&gt;
        &lt;h5&gt;Demo Page 2&lt;/h5&gt;
    &lt;/div&gt;
    &lt;div id="page2UiContent" data-role="main" class="ui-content"&gt;
    &lt;/div&gt;
    &lt;div data-role="footer" data-position="fixed" style="text-align:center;"&gt;
        &lt;div data-role="navbar"&gt;
            &lt;ul&gt;
                &lt;li&gt;&lt;a id="page2OkButton" class="ui-btn ui-icon-check ui-btn-icon-left"&gt;OK&lt;/a&gt;&lt;/li&gt;
            &lt;/ul&gt;
        &lt;/div&gt;
    &lt;/div&gt;
&lt;/div&gt;</code></pre>
</div>
</div>
</p>


<p>I've a big problem with a jQuery Mobile Application:
I'm using custom functions (they are triggered by onClick) to switch the page with currentPage.</p>

<p>It only happens on Android-Devices on sites in which has changed (due to ajax requests) with the integrated browser. iOS and Chrome works nice.</p>

<p>After clicking on an element, the animation started but just before it ends, it switches back to the old page. After a half second, it switches back to the new.</p>

<p>I made a movie of the bug here: <a href="http://www.youtube.com/watch?v=sXxvVUxniNg">http://www.youtube.com/watch?v=sXxvVUxniNg</a></p>

<p>Thank you very much</p>

<p>Code (CoffeeScript):</p>

<pre><code>class Guide

    @categoriesLoaded = false

    @loadSearch: -&gt;

        $.mobile.changePage $("#guide"),
            transition: 'slide'
            changeHash: false

        if !@categoriesLoaded

            @categoriesLoaded = true

            GuideApi.getCategories (data) -&gt;
                output = Mustache.render $("#tmpl-guide-categories-select").html(), 
                    categories: data

                $("#guide-search-category").append output

                $("#guide-search-category").val($("#guide-search-category option:first").val());

window.WgSwitchGuide = -&gt;
        Guide.loadSearch
</code></pre>


changePage "jumps" back to old page

Android

jQuery

我在使用jQuery移动应用程序时遇到了一个很大的问题:我使用定制函数(它们由onClick触发)来切换currentPage页面。它只发生在Android设备上的网站上，其中已更改(由于ajax请求)与集成浏览器。iOS和Chrome运行得很好。单击元素后，动画开始，但就在它结束之前，它切换回旧页面。半秒后，它切换回...

问changePage“跳转”回到旧页面
EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问changePage“跳转”回到旧页面EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问changePage“跳转”回到旧页面
EN