javascript - Generating div on the fly with jQuery fails to load picture -

i using jquery diplay dialog on page. div written in html, , show or hide when need jquery (open/close of .dialog() method). "issue" div loaded @ start of page , if not visible, markup still visible in source. generate dive on fly when click on button only.

here div :

    <div class="dialog" id="uploaddialog" title="uploading...">     <div>     file <i><span id="fileinfo"></span></i> being uploaded<br />     <b>estimate time </b><span id="temps"></span><br /><br />     <b>please wait</b><br /><br />     <i>this window willclose automatically @ end of upload</i>     </div>     <table width="100%">         <tr>             <td width="33%"></td>             <td width="33%" align="left">                 <img alt="loading..." id="imgloading" src="image/loader.gif" /><br /><br />                 <input type="button" value="cancel upload" onclick="javascript:cancel();"/>             </td>             <td width="33%"></td>         </tr>     </table>         </div> 

currently @ begning of javascript :

$("#uploaddialog").dialog({     width: 400 }); $("#uploaddialog").dialog("close"); 

and when click fill span , $("#uploaddialog").dialog("open");

im using div wrapper other dialog on page follow :

    <div id="wrapper"></div> 

and in js file call on click :

$("#wrapper").empty(); $("#wrapper").append("<div class='dialog' id='uploaddialog' .....");//all div content $("#uploaddialog").dialog({     width: 400 }); 

however wont load since dimension of dialog not same when use first method (html + open/close) , gif wont load (picutre not found icon though there no 404 ressource not found in console)

any ideas ?

you need bind dialog again after appending div

$("#wrapper").empty(); $("#wrapper").append("<div class='dialog' id='uploaddialog' .....");/ $("#uploaddialog").dialog({ width: 400 });