jQueryMobile - 以编程方式打开弹出窗口失败并出现 js 错误

Question

以编程方式打开 jQuery 移动弹出窗口会导致 javascript 运行时错误。

0x800a138f - JavaScript 运行时错误：无法获取属性 'nodeName' 未定义或空引用

我已经用 IE 和 Chrome 进行了测试，它们的结果相似。

<div data-role="popup" id="myPopup" data-overlay-theme="b" data-theme="c" data-dissmissible="false" class="ui-corner-all">
    <div data-role="header"><h1></h1></div>
    <div data-role="content" data-theme="a" class="ui-corner-all ui-content">
        <p id="myPopupText">test test</p>
    </div>
</div>

<script type="text/javascript">
    $("#main").on("pageinit", function () {
        $("#myPopup").popup("open", { transition: "slideup" });
    });
</script>

我也尝试过在 .popup("open") 之前使用 .popup()。在 VS2015 中调试我看到显示了弹出窗口，但是当运行触发异常时它再次消失。

导致此异常的原因是什么，我该如何解决？

Answer 1

是否要在第一次加载页面时打开弹出窗口？如果是这样，请使用 $(document).on(... 并尝试稍微延迟：

$(document).on("pageinit","#main", function(){ 
   setTimeout(function(){
      $("#myPopup").popup("open", { transition: "slideup"   });
    }, 10);   
});

您希望每次访问该页面时弹出吗？使用 pagecontainer 小部件 transition event:

$(document).on( "pagecontainertransition", function( event, ui ) { 
    if (ui.toPage.prop("id") == "main"){
      setTimeout(function(){
        $("#myPopup").popup("open", { transition: "flip"   });
      }, 10); 
    }   
});

是否要在页面加载后启动弹出窗口以响应用户操作？

$(document).on("pagecreate","#main", function(){ 
  $("#btnPop").on("click", function(){
    $("#myPopup").popup("open", { transition: "flip"   });
  });
});

jQueryMobile - 以编程方式打开弹出窗口失败并出现 js 错误

jQueryMobile - open a popup programmatically fails with js error

javascript

jquery

jquery-mobile

DEMO