javascript - jQuery mobile - panel style removed when loading from any page other than initial one -


i have jquery mobile site 2 pages loaded 1 html file use same panel, in file, outside of data-rol="page" divs. problem when reload second page, in visit before using first page, jquery mobile styling on ul in panel gone.

i've tried adding enhancewithin() code after creating panel must missing something, it's loading same panel, how style lost if reloaded page?

source

<div data-role="page" class="ui-responsive-panel" data-theme="b"  id="page">      <div data-role="header"  data-position="fixed">         <h1>alpha</h1>             <a href="#left-panel" data-icon="bars" data-iconpos="notext">menu</a>                                             </div><!-- /header -->      <div data-role="content">         <h1>news , features</h1>         <a href="#page2"><p>lorem ipsum</p>     </div><!-- /content -->      <div data-role="footer" data-position="fixed">         <p>content tbd</p>     </div>  </div>  <div data-role="page" class="ui-responsive-panel" data-theme="b"  id="page2">      <div data-role="header"  data-position="fixed">         <h1>alpha</h1>             <a href="#left-panel" data-icon="bars" data-iconpos="notext">menu</a>                                             </div><!-- /header -->      <div data-role="content">         <h1>news , features</h1>         <a href="#page"><p>lorem ipsum</p>     </div><!-- /content -->      <div data-role="footer" data-position="fixed">         <p>content tbd</p>     </div>  </div> 

and script:

<script type="text/javascript"> var panel = '<div data-role="panel" id="left-panel" data-position="right" data-display="push"><h1>panel</h1><ul data-role="listview" data-theme="b"><li><a href="#">test</a></li><li>test2</li></ul></div>'; $(document).one('pagebeforecreate', function () {   $.mobile.pagecontainer.prepend(panel);   $("#left-panel").panel();  }); </script> 

edit: weird explain, if visit first page, id=page menu loads traditional jquery mobile styling. if navigate second page(id=page") after starting on first page, styling fine. if you, on id="page2" hit 'reload' button on browser style panel gone, , remains gone if navigate id="page". unless first page starting point, style never applied, make sense?

on load of second page use:

.trigger('create'); 

use recreate panel on page 2.

more here:

reference


Comments

Popular posts from this blog

php - Magento - Deleted Base url key -

javascript - Tooltipster plugin not firing jquery function when button or any click even occur -

java - WrongTypeOfReturnValue exception thrown when unit testing using mockito -