关闭弹出窗口并导航到jQuery Mobile中的另一个页面

时间:2014-03-20 13:24:54

标签: javascript jquery html jquery-mobile popup

我试图在用户按下弹出窗口内的按钮时关闭弹出窗口/对话框,然后导航到另一个页面(单页应用程序,多个"页面")。 jQM 1.4.0

如果我点击弹出窗口中的YES按钮,它将导航到我想要的#page3,然后跳回到起始页。 如果我注释掉.popup(" close");它有效,但我需要在我做之前关闭弹出窗口。这有什么不对?

JS

$("#popupyes").on("tap", function(e)
    {
        $("#popupDialog").popup("close"); // <---- doesn't work

        //call some js-function before navigate to #page3
    });

HTML

<a href="#popupDialog" data-rel="popup" data-position-to="window" data-transition="pop" class="ui-btn ui-corner-all ui-shadow ui-btn-a">Button</a>

            <div data-role="popup" id="popupDialog" data-overlay-theme="a" data-theme="a" data-dismissible="false" style="max-width:400px;">
                <div data-role="header" data-theme="a">
                <h1>Head</h1>
                </div>
                <div data-role="main" class="ui-content">
                    <h3 class="ui-title">Text.</h3>
                <p>Text?</p>
                    <a href="#page3" class="ui-btn ui-corner-all ui-shadow ui-btn-inline ui-btn-a">No</a>
                    <a href="#" class="ui-btn ui-shadow ui-corner-all ui-btn-inline ui-btn-icon-right ui-icon-delete" data-rel="back">Abort</a>
                    <a id="popupyes" href="#page3" class="ui-btn ui-shadow ui-corner-all ui-btn-inline">Yes</a>
                </div>
            </div>  

更新     我可以使用$("#popupDialog").hide(); 但是它仍然在记忆中,只是隐藏......或等待,它会在一段时间后自行终止吗?

1 个答案:

答案 0 :(得分:5)

弹出窗口完全关闭后,您只需听popupafterclose即可调用任何功能。

$(document).on("pagecreate", function () {
    $("#popupID a").on("tap", function () {
        /* do something */
        $("#popupID").popup({
            afterclose: function () {
              /* do something */
            }
        }, "close");
    });
});
  

<强> Demo