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

Posted 2023-05-09

【中文标题】关闭弹出窗口并导航到 jQuery Mobile 中的另一个页面

【英文标题】：Close popup and navigate to another page in jQuery Mobile

【发布时间】：2014-04-27 09:09:31

【问题描述】：

当用户按下弹出窗口内的按钮时，我试图关闭弹出窗口/对话框，并导航到另一个页面（单页应用程序，多个“页面”）。 jQM 1.4.0

如果我点击弹出窗口中的“是”按钮，它将导航到我想要的#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】：

popup完全关闭后，你可以简单地听popupafterclose调用任何函数。

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

Demo

【讨论】：

啊，完美！不知道有专门的处理程序！ :-)

@BakedInhalf afterclose 和 afteropen 很方便 ;)

是的，非常！我已经添加了 afterclose :-) 完美的作品