Неисправность при попытке закрыть всплывающее окно с помощью jquery mobile

Question

Я использую jquerymobile (1.4.0). У меня есть один html-файл, который вызывает функцию javascript, которая создает всплывающее окно сброса. Всплывающее окно сброса имеет две кнопки (да, нет), которые в обоих случаях должны закрыть всплывающее окно после выполнения некоторых других операций.

Когда кнопка закрытия нажата, я получаю следующее сообщение об ошибке:.

Uncaught Error: cannot call methods on popup prior to initialization; attempted to call method 'close'

От поиска StackOverflow и других сайтов я мог видеть предложения, которые я называю («mypopup») всплывающее окно() до моего что я делаю. Я попытался позвонить («#theResetPopup»), а также («#lnkResetPopup»), но ни одна из них не работает. Вызов $ (this) .popup.close(); (После того, как ($ this.popup()) от кнопки «нет», не только приводит в результате чего фактическая кнопка исчезнет.

Если я следующий в обработчике btnResetNo

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

всплывающее окно действительно исчезает но я получаю следующее сообщение об ошибке:

Uncaught HierarchyRequestError: Failed to execute 'appendChild' on 'Node': The new child element contains the parent.

Я думаю, что вопрос связан с тем, что я использую метод 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

Вы, кажется, микшируете диалог и всплывающую разметку.

Here is a working DEMO

Ссылка принимает данные-отн всплывающего окна, в то время как всплывающее окно ДИВ теряет роль страницы и принимает данные-позиционно-к:

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