JQuery Mobile changepage 改变页面而不是返回上一页

Question

我正在尝试在弹出窗口锚点内使用 $.mobile.changePage 来切换到另一个页面，但是当我单击弹出窗口内的锚点时，页面会发生变化，然后再次返回到上一页。

我试过这个解决方案：changePage "jumps" back to old page 使用这个： $(文档).bind("mobileinit", 函数(){ $.mobile.pushStateEnabled = false; });

但是也没用。

这就是我构建页面的方式：

<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 手机将我重定向到另一个页面，然后返回到上一个页面。

有人知道会发生什么吗？

Answer 1

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

另一个问题，popup div 除了 page div[= 外，不应该包含在 div 中26=]。此外，只要单击 列表项 ，您就会向 #linkConfirmacaoDialog 添加多个 click 侦听器。将 click 绑定放在其他 click 绑定之外。

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