关闭上一个弹出窗口后，jQuery Mobile弹出窗口无法打开

Question

我有一个jQuery弹出窗口，接受用户输入，这可能会导致错误。 如果有错误，我想弹出第二个弹出窗口，但是我无法正常工作。

这是一个精简的示例，我在jsfiddle中也有： http : //jsfiddle.net/tz4ju/2/

HTML：

<div data-role="page" id="home">
    <div data-role="popup" id="errorDialog" class='ui-corner-none ui-content'>
        <p id="errormsg"></p>
    </div>

    <div data-role="popup" id="addFolderDialog" class='ui-corner-none portalpopup'>
        <div data-role='content'>
            <p></p>
            <div data-role="fieldcontain">
                <label for="name">New Folder:</label>
                <input type="text" name="name" id="newfolder_val" value="" class="ret_submit" rel="adddir_submit" />
            </div>
            <div class="clearfix">
                <a data-role="button" data-inline="true" data-theme="b" id="adddir_submit" onclick='create_folder_submit()'>Add Folder</a>
                <a data-role="button" data-inline="true" data-rel='back'>Cancel</a>
            </div>
        </div>
    </div>

    <p><a href="#addFolderDialog" data-rel="popup">Open Popup</a></p>
</div>

JavaScript：

window.create_folder_submit = function () {
    $("#addFolderDialog").popup("close");
    $("#errormsg").text("ERROR!");
    $("#errorDialog").popup("open");
}

顺便说一句，如果我在其他任何地方调用$("#errorDialog").popup("open") ，它将起作用。 我究竟做错了什么？

Answer 1

根据此文档（请参阅页面末尾），在jquery mobile中不允许链接弹出窗口。

您可以如下所示实现链接弹出窗口。

$( document ).on( "pageinit", function() {
$( '.popupParent' ).on({
    popupafterclose: function() {
        setTimeout( function(){ $( '.popupChild' ).popup( 'open' ) }, 100 );
    }
});
});

请参阅此小提琴演示

Answer 2

检查您的浏览器弹出窗口阻止程序。 因此需要使用setinterval来触发它。

像这样简单地编写您的js，

window.create_folder_submit = function () {
    $("#addFolderDialog").popup("close");
    $("#errormsg").text("ERROR!");
    var popup = setInterval(function(){
        $("#errorDialog").popup('open');
        clearInterval(popup);
    },1);
};

查看此工作演示

Answer 3

实际上，使用popupafterclose事件无法正常工作，因为每次您离开弹出窗口时都会触发该事件。 即使您点击“取消”。 您应该在关闭和打开之间进行简单的延迟。