Opening a jQuery Mobile popup programmatically results in a javascript runtime error.

0x800a138f - JavaScript runtime error: Unable to get property 'nodeName' of undefined or null reference

I've tested with both IE and Chrome, which have similar results.

<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>

I've also tried with .popup() before .popup("open"). Debugging in VS2015 I see that the popup is displayed, but while running it disappears again when the exception is fired.

What's causing this exception, and how may I fix it?

Do you want to open the popup just the first time the page is loaded? if so use $(document).on(... and try a slight delay:

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

Do you want it to popup each time the page is visited.? Use the pagecontainer widget transition event:

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

Do you want to launch the popup after the page has loaded in response to a user action?

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

DEMO