尝试使用 jquery mobile 关闭弹出窗口时未捕获的错误

Question

我正在使用 jquerymobile (1.4.0)。我有一个 html 文件，它调用一个创建重置弹出窗口的 javascript 函数。重置弹出窗口有两个按钮（是，否），在这两种情况下，它们都应该在执行一些其他操作后关闭弹出窗口。

按下关闭按钮时，我收到以下错误：

未捕获的错误：无法在初始化之前调用弹出窗口上的方法； 试图调用方法'close'

通过搜索 stackoverflow 和其他网站，我可以看到在我正在执行的关闭操作之前我应该​​调用 ("mypopup").popup() 的建议。我曾尝试调用 ("#theResetPopup") 和 ("#lnkResetPopup")，但这些都不起作用。调用 $(this).popup.close(); （在（ $this.popup() 之后）来自“否”按钮只会导致实际按钮消失。

如果我在 btnResetNo 处理程序中执行以下操作

$("#theResetPopup").popup();
$("#theResetPopup").popup("close");

弹出窗口确实消失了，但我收到以下错误：

未捕获的 HierarchyRequestError：无法执行“appendChild” 'Node'：新的子元素包含父元素。

我认为问题与我正在使用 lnkPopup 方法有关，但我不知道如何解决它。 :(

非常感谢任何帮助，在此先感谢！

来自我的 .html 文件。

<a id='lnkResetPopup' href="#theResetPopup" data-rel="dialog" data-transition="flip" data-role="popup" data-position-to="window" style='display:none;'></a>

<div data-role="page" id="theResetPopup" data-role="popup">   
    <div data-role="header" id="resetPopupTitle">
        Reset
    </div>  

    All progress will be lost. Are you sure?

    <center>
    <button id="btnResetYes" type="submit" data-theme="a" class="ui-btn-corner-all ui-btn ui-btn-inline ui-icon-check ui-btn-icon-notext">Yes</button>
    <button id="btnResetNo" type="submit" data-theme="a" class="ui-btn-corner-all ui-btn ui-btn-inline ui-icon-delete ui-btn-icon-notext">No</button>
    </center>

    <script>
    $( "#btnResetYes" ).click(function() {
        gameClass.resetGame();  
        gameClass.closeResetPopup();
    });

    $( "#btnResetNo" ).click(function() {
        gameClass.closeResetPopup();
        //$("#theResetPopup").popup();
        //$("#theResetPopup").popup("close");
    });
    </script>
</div>

来自我的 JavaScript 文件。

showResetPopup:function()
{
    $("#lnkResetPopup").popup();
    $("#lnkResetPopup").popup('open');

    $("#resetPopupTitle").html('<center>Reset?</center>');
},

closeResetPopup:function()
{
    $("#lnkResetPopup").popup();
    $("#lnkResetPopup").popup('close');
},

Answer 1

您似乎在混合使用对话框和弹出标记。

这是一个有效的DEMO

链接接受popup的data-rel，而popup div失去页面角色，接受data-position-to：

<div data-role="page" id="my_view">
    <div data-role="header">
         <h1>My page</h1> 
    </div>
    <div role="main" class="ui-content"> 

        <a id="lnkResetPopup" href="#theResetPopup" data-transition="flip" data-rel="popup" class="ui-btn">Reset </a>

    </div>

    <div id="theResetPopup" data-role="popup" data-position-to="window" data-dismissible="false">
        <div data-role="header" id="resetPopupTitle">Reset</div>All progress will be lost. Are you sure?
        <center>
            <button id="btnResetYes" type="submit" data-theme="a" class="ui-btn-corner-all ui-btn ui-btn-inline ui-icon-check ui-btn-icon-notext">Yes</button>
            <button id="btnResetNo" type="submit" data-theme="a" class="ui-btn-corner-all ui-btn ui-btn-inline ui-icon-delete ui-btn-icon-notext">No</button>
        </center>
    </div>
</div>

要关闭代码，您只需调用 $("#theResetPopup").popup('close'); 我还将代码从标记中取出，并将其与所有其他 javascript 一起放在页面底部。

$(document).on("click", "#btnResetYes", function () {
    $("#theResetPopup").popup('close');
});
$(document).on("click", "#btnResetNo", function () {
    $("#theResetPopup").popup('close');
});