jQuery Mobile changepage更改页面比返回上一页

Question

I´m trying to use $.mobile.changePage inside a popup anchor to change to another page but when I click the anchor inside the popup the page changes and then back to the previous page again.

I tried this solution: changePage "jumps" back to old page using this: $(document).bind("mobileinit", function(){ $.mobile.pushStateEnabled = false; });

but it didn't work either.

This is how I built my page:

<div id="pgTest" data-role="page" data-theme="a">
    @Html.Partial("_Header", new WebApp.Models.HeaderModel() { Header = "Title" })
    <div data-role="ui-content">
        <div style="width:90%; margin:0 auto;">
            @Html.Partial("_ListViewWithFilter", Model)

            <!--Pop Up-->
            <div data-role="popup" id="popupConfirmacao" data-dismissible="false" data-overlay-theme="a" class="ui-corner-all">
                <div role="main" class="ui-content">
                    <h3 class="ui-title" id="dialogTitle"></h3>
                    <a id="linkConfirmacaoDialog" href="#" class="ui-btn ui-corner-all ui-shadow ui-btn-inline ui-btn-b" data-rel="back">Sim</a>
                    <a href="#" class="ui-btn ui-corner-all ui-shadow ui-btn-inline ui-btn-b" data-rel="back">Não</a>
                </div>
            </div>
            <!--Pop Up ends-->
        </div>
    </div>
    @Html.Partial("_Footer")
</div>

and this is my JS:

<script type="text/javascript">
        $(function () {
            var itens = $('#ulMusicas>li');
            itens.click(function () {
                var nomeMusica = $(this).find('a').text();
                $('#dialogTitle').text('Add "' + nomeMusica + '"?');
                $('#linkConfirmacaoDialog').click(function () {                    
                    $.mobile.changePage('/Controller2');
                });
                $('#popupConfirmacao').popup('open', { positionTo: 'window', transition: 'pop' });
            });
        });
</script>

It basically creates a listview and when you click any item it will open a popup. If you click the button on popup it should redirect you to the other page. At this moment jquery mobile redirects me to the other page and then backs to the previous page.

Anyone have any ideia what may be happening?

Answer 1

The issue is caused by data-rel="back" in #linkConfirmacaoDialog confirmation button. When you hit that button, you give two different navigation orders. What happens is that you navigate to target page and then back in history. Use data-rel="back" only when you want to close popup and remain in same page.

Another issue, popup div shouldn't be wrapped in div other than page div . Moreover, you are adding multiple click listeners to #linkConfirmacaoDialog whenever a list item is clicked. Place click binding outside other click binding.

$(function () {
    var itens = $('#ulMusicas>li');
    /* list item click listener */
    itens.click(function () {
        var nomeMusica = $(this).find('a').text();
        $('#dialogTitle').text('Add "' + nomeMusica + '"?');
        $('#popupConfirmacao').popup('open', {
            positionTo: 'window',
            transition: 'pop'
        });
    });
    /* confirmation button - popup */
    $('#linkConfirmacaoDialog').click(function () {
        $.mobile.changePage('/Controller2');
    });
});