ChangePage "перескакивает" обратно на старую страницу

Ответ 1

У меня была такая же проблема. И я все испробовал, я, наконец, закончил решение. Я обнаружил, что ошибка была главным образом в браузере. Поэтому я устанавливаю конфигурацию pushStateEnabled как false. Я сделал это, выполнив следующие действия, добавив этот script.

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

Он должен быть добавлен перед вызовом jquery-mobile script, для получения дополнительной информации вы можете увидеть его в описании JQuery

И он решил проблему, не отскакивая назад.

Ответ 2

У меня была такая же проблема и для Android, и для ios. Для меня это происходило на тяжелых страницах, то есть на страницах со сложными элементами и т.д. Похоже, вы используете переход "слайд", и это то, что я использовал. Вывод переходов страниц (т.е. $.mobile.changePage( "page.html", {переход: "none" })), для тех страниц, которые решили эту проблему для меня. Надеюсь, это поможет.

Если вы хотите сохранить переход, вы можете попробовать предварительно загрузить страницу сначала, когда отображается предыдущая страница, используя файл $.mobile.loadPage, а затем показать переход. Я сам изучаю этот маршрут, но, вероятно, стоит попробовать.

Изменить: ОК - я изучил последнее предложение, и это, похоже, не работает. Будет придерживаться первого варианта.

Ответ 3

Не пытались ли вы добавить событие stopPropagation и preventDefault на первом событии клика? Таким образом, действие события click по умолчанию не будет инициировано. Кроме того, stopPropagation предотвращает появление пузырьков в дереве DOM, предотвращая уведомление родительских обработчиков о событии.

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

Пример:

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

Ответ 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);

(Полагая, что раньше в функции не работало, все эти вещи выполняются более одного раза за один переход страницы. И полсекунды представляли собой минимальный тайм-аут, который предотвращал переходы страницы.)

Я надеюсь, что это поможет кому-то, даже если это взломать...

Ответ 5

Какова ваша версия JQM и Android?

Я не уверен, если я правильно понимаю. Я думаю, что мерцание перехода может исходить из следующего предположения.

• Перемещение DOM на тяжелую страницу.
• Использование "translate3d" где-нибудь в файле css.
• Не использовать функцию "H/W Acceleration". Включите, добавив эту строку в свой AndroidManifest.xml в <application>

Android: hardwareAccelerated = "истина"

Ответ 6

Я столкнулся с точно таким же поведением, и кажется, что у немногих людей такая же проблема. Сначала я думал, что это вызвано мобильной библиотекой jQuery. Позже мне удалось найти, откуда возникла проблема, и это ошибка в моем собственном коде. Я сделал демо, чтобы объяснить проблему.

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

Надеюсь, это может быть намеком для людей, имеющих одинаковую проблему.

$(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 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"});
    });
    //////////////////////////////////////////////
    //////////////////////////////////////////////
});

<link href="#" onclick="location.href='http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.css'; return false;" 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>