Question

我的jQuery移动应用程序存在很大问题：我正在使用自定义函数（它们由onClick触发）以使用currentPage切换页面。

仅在使用集成浏览器更改（由于ajax请求）的网站上的Android设备上发生。 iOS和Chrome效果很好。

单击元素后，动画开始但在结束之前，它会切换回旧页面。半秒后，它会切换回新的。

我在这里制作了一个错误的电影：http://www.youtube.com/watch?v=sXxvVUxniNg

非常感谢

代码（CoffeeScript）：

class Guide

    @categoriesLoaded = false

    @loadSearch: ->

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

        if !@categoriesLoaded

            @categoriesLoaded = true

            GuideApi.getCategories (data) ->
                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 = ->
        Guide.loadSearch

Answer 1

我遇到了同样的问题。我尝试了一切，最后以解决方案结束。我发现错误主要是在浏览器中。所以我将pushStateEnabled的配置设置为false。我通过执行以下操作，添加此脚本。

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

应该在调用jquery-mobile脚本之前添加它，有关更多信息，您可以在JQuery description上看到它

它解决了问题不再跳回来。

Answer 2

我在android和ios上都有完全相同的问题。对我来说，它发生在重页面上，即具有复杂元素的页面等。看起来你正在使用“幻灯片”转换，这也是我正在使用的。取出这些页面的页面转换（即$ .mobile.changePage（“page.html”，{transition：“none”}））为我解决了这个问题。希望这会有所帮助。

如果要保留转换，可以尝试在显示上一页时首先预加载页面，方法是使用$ .mobile.loadPage，然后显示转换。我自己正在探索这条路线，但这可能值得尝试。

编辑：好的 - 我探索了最后一个建议，这似乎没有用。将坚持使用第一个选项。

Answer 3

您是否尝试在第一页的点击事件中添加事件stopPropagation和preventDefault方法？这样，不会触发click事件的默认操作。此外，stopPropagation可防止事件冒泡DOM树，从而阻止任何父处理程序收到事件通知。

event.stopPropagation();
event.preventDefault();

示例：

$("p").click(function(event){
    event.stopPropagation();
    event.preventDefault();
    // change page
});

Answer 4

经过几周的努力寻找解决方案之后，我最终篡改了JQM库，以便一个接一个地禁用页面转换。这不是一个好的解决方案，但这是我唯一能够开展工作的方法。

我正在获取页面跳回$ .mobile.changePage和锚链接。我使用了幻灯片转换，但删除它并没有解决问题。将pushStateEnabled设置为false也不起作用。跳转发生在所有设备和浏览器上（我测试过，无论如何）。

所以这就是我对JQM库（v1.3.2）所做的。

在定义$ .mobile.changePage函数之前，我添加了：

var justChangedPage = false;

然后在函数中有一行：

if ( pbcEvent.isDefaultPrevented()) {
    return;
}

我改为：

if ( pbcEvent.isDefaultPrevented() || justChangedPage) {
    return;
}

然后就在$ .mobile.changePage函数的这一部分之后：

if ( toPage[ 0 ] === $.mobile.firstPage[ 0 ] && !settings.dataUrl ) {
    settings.dataUrl = documentUrl.hrefNoHash;
}

我补充说：

justChangedPage = true;
setTimeout(function() {
    justChangedPage = false;
}, 500);

（把它放在函数中的早期没有用 - 所有这些东西在单个页面转换中执行多次。而半秒似乎是阻止页面跳转的最小超时。）

我希望这可以帮助某人，即使它是一个黑客......

Answer 5

您的JQM和Android版本是什么？

我不确定我是否理解正确。我认为转换闪烁可能来自以下假设。

重页DOM过渡。
在css文件中的某处使用“translate3d”。
不使用“H / W加速”功能。通过将此行添加到<application>

AndroidManifest.xml

机器人：硬件加速= “真”

Answer 6

我遇到了完全相同的行为，似乎很少有人遇到同样的问题。起初我以为它是由jQuery移动库引起的。后来，我设法找到问题的来源，这是我自己的代码中的一个错误。我做了一个演示来解释这个问题。

http://jsfiddle.net/pengyanb/6zvpgd4p/10/

希望这可以暗示有同样问题的人。

＆＃13;

$(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++)
    {
        htmlGeneratedOnTheFly += '<li><a>Random html element</a></li><li data-role="list-divider"></li>';
    }
    htmlGeneratedOnTheFly += '</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"});
    });
    //////////////////////////////////////////////
    //////////////////////////////////////////////
});

＆＃13;

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

＆＃13;

changePage“跳转”回旧页面

6 个答案: