javascript - JQM 1.4.2 Adding template from ajax to popup not rendering -

im getting template php file via .get can't inputs or list view render properly.

when append html directly within js file render think has how data template being returned.

thanks in advanced.

js

$(document).ready(function() { $('#addoffice, #adddoctor').on('click', function() {      var $popup = $("<div/>").popup({     dismissible : false,     theme : "b",     overlaytheme : "b",     transition : "pop"     }).on("popupafterclose", function() {         $(this).remove();     }).css({         'width': '400px',         'padding': '10px'     });          $.get('../templates/'+$(this).attr('id')+'.php', function(data){         $(data).appendto($popup);     });     $popup.popup('open').trigger("create"); }); }); 

php template

<form id="doctoradd">     <div class="ui-field-contain">         <label for="doctorname">full name<span style="color:rgba(191,191,191,1.00); font-size:.8em; float:right;"> ( required )</span></label>         <input type="text" name="doctorname" id="doctorname" placeholder="full name" value="">     </div>         <div class="ui-field-contain">         <label for="doctordob">dob<span style="color:rgba(191,191,191,1.00); font-size:.8em; float:right;"> ( required )</span></label>         <input type="text" name="doctordob" id="doctordob" placeholder="dob" value="">     </div>          <ul data-role="listview" data-inset="true" style="margin:20px 0px 0px 0px;">       <li><a href="#" style="text-align:center;" data-rel="back" class="ui-btn ui-mini">add</a></li>       <li><a href="#" style="text-align:center;" data-rel="back" class="ui-btn ui-mini">clear</a></li>     </ul>  </form> 

working example: http://jsfiddle.net/gajotres/45v7g/

javascript:

$(document).on('pageshow', '#index', function(){      $(document).on('click', '#addpopup',function() {         // close button         var closebtn = $('<a href="#" data-rel="back" data-role="button" data-theme="b" data-icon="delete" data-iconpos="notext" class="ui-btn-right">close</a>').button();          // text ajax         var content = '<form id="doctoradd"><div class="ui-field-contain"><label for="doctorname">full name<span style="color:rgba(191,191,191,1.00); font-size:.8em; float:right;"> ( required )</span></label><input type="text" name="doctorname" id="doctorname" placeholder="full name" value=""></div>    <div class="ui-field-contain"><label for="doctordob">dob<span style="color:rgba(191,191,191,1.00); font-size:.8em; float:right;"> ( required )</span></label><input type="text" name="doctordob" id="doctordob" placeholder="dob" value=""></div>    <ul data-role="listview" data-inset="true" style="margin:20px 0px 0px 0px;"><li><a href="#" style="text-align:center;" data-rel="back" class="ui-btn ui-mini">add</a></li><li><a href="#" style="text-align:center;" data-rel="back" class="ui-btn ui-mini">clear</a></li></ul> </form>';          // popup body - set width optional - append button , ajax msg         var popup = $("<div/>", {             "data-role": "popup",             "class" : "ui-content"         }).css({             "width": "400px"         }).append(closebtn).append(content);          // append active page         $(".ui-page-active").append(popup);          // create , add listener delete once it's closed         // open         $("[data-role=popup]").on("popupafterclose", function () {             $(this).remove();         }).on("popupafteropen", function () {             $(this).popup("reposition", {                 "positionto": "window"             });         }).popup({             dismissible : false,             theme : "b",             overlaytheme : "b",             transition : "pop"         }).enhancewithin().popup("open");                });  }); 

• use .enhancewithin() instead of trigger('create')
• trigger('create') deprecated , used on page content div

one last thing, code used here not work because using $.get, because asynchronous process, need use callback function done enhance code.

basically code should this:

$.get( '../templates/'+$(this).attr('id')+'.php').done(function( data ) {     // close button     var closebtn = $('<a href="#" data-rel="back" data-role="button" data-theme="b" data-icon="delete" data-iconpos="notext" class="ui-btn-right">close</a>').button();      // text ajax     //var content = '<form id="doctoradd"><div class="ui-field-contain"><label for="doctorname">full name<span style="color:rgba(191,191,191,1.00); font-size:.8em; float:right;"> ( required )</span></label><input type="text" name="doctorname" id="doctorname" placeholder="full name" value=""></div>    <div class="ui-field-contain"><label for="doctordob">dob<span style="color:rgba(191,191,191,1.00); font-size:.8em; float:right;"> ( required )</span></label><input type="text" name="doctordob" id="doctordob" placeholder="dob" value=""></div>    <ul data-role="listview" data-inset="true" style="margin:20px 0px 0px 0px;"><li><a href="#" style="text-align:center;" data-rel="back" class="ui-btn ui-mini">add</a></li><li><a href="#" style="text-align:center;" data-rel="back" class="ui-btn ui-mini">clear</a></li></ul> </form>';      // popup body - set width optional - append button , ajax msg     var popup = $("<div/>", {         "data-role": "popup",         "class" : "ui-content"     }).css({         "width": "400px"     }).append(closebtn).append(data); // here using data response $.get      // append active page     $(".ui-page-active").append(popup);      // create , add listener delete once it's closed     // open     $("[data-role=popup]").on("popupafterclose", function () {         $(this).remove();     }).on("popupafteropen", function () {         $(this).popup("reposition", {             "positionto": "window"         });     }).popup({         dismissible : false,         theme : "b",         overlaytheme : "b",         transition : "pop"     }).enhancewithin().popup("open");            });