jQuery mobile - generating html dynamically not working with iframe

Question

First things first here is my js

$(document).ready(function(){

        $('<a>Launch</a>').attr({'href':'#popupBasic','data-rel':'popup','data-transition':'pop','class':'ui-btn ui-corner-all ui-shadow ui-btn-inline'}).appendTo('body')
        $("<div></div>").attr({'data-role':'popup', 'id':'popupBasic'}).appendTo('body')
        $('#popupBasic').html('<iframe src="http://www.example.org"></iframe>')
   });

Through testing I have narrowed the problem down to the iframe. For whatever reason when I use jQuery to create the iframe and append it the div that is when it stops functioning.

I'm not sure why this is. I have tried using both appendTo and .html as shown above both with no success.

My question is what is the correct way to dynamically create the iframe that will allow this code to work as intended?

Answer 1

For jQM you should append to a page div and not the body. A page looks like this:

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

Next instead of document.ready, use the jQM page events like pagecreate, And after adding the popup to the page, you need to tell jQM to initialize the widget by calling .popup():

$(document).on("pagecreate","#page1", function(){   
    $('<a>Launch</a>').attr({'href':'#popupBasic','data-rel':'popup','data-transition':'pop','class':'ui-btn ui-corner-all ui-shadow ui-btn-inline'}).appendTo('#mainCont')
    $("<div></div>").attr({'data-role':'popup', 'id':'popupBasic'}).appendTo('#mainCont').popup();
    $('#popupBasic').html('<iframe src="http://www.example.org"></iframe>')
 }); 

Working DEMO