jQuery Mobile changepage更改页面比返回上一页 [英] JQuery Mobile changepage changes the page than go back to the previous page

问题描述

我正在尝试使用弹出锚中的$ .mobile.changePage更改为另一个页面，但是当我单击弹出窗口中的锚时，页面将更改，然后再次返回到上一页.

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.

我尝试了以下解决方案: changePage"jumps"返回旧页面 使用这个: $(document).bind("mobileinit"，function(){ $ .mobile.pushStateEnabled = false; });

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

但它也不起作用.

这是我建立页面的方式:

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>

这是我的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>

它基本上会创建一个列表视图，当您单击任何项​​目时，它将打开一个弹出窗口.如果单击弹出窗口上的按钮，则应将您重定向到另一页.此时，jquery mobile将我重定向到另一页，然后返回到上一页.

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?

推荐答案

问题是由#linkConfirmacaoDialog确认按钮中的data-rel="back"引起的.当您按下该按钮时，您将给出两个不同的导航顺序.发生的情况是，您导航到目标页面，然后返回历史记录.仅当您要关闭 popup 并保留在同一页面时，才使用data-rel="back".

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.

另一个问题， popup div除了 page div 之外，不应包装在div中.此外，每当单击列表项时，就将多个click侦听器添加到#linkConfirmacaoDialog.将click绑定放置在其他click绑定之外.

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');
    });
});

这篇关于jQuery Mobile changepage更改页面比返回上一页的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！