Question

我有一个jQuery移动网站，其中有2个页面加载到一个html文件中，该文件使用相同的面板，该面板也位于文件中，就在所有数据的外面 - rol =＆＃34; page＆＃34; div的。问题是当你重新加载第二页时，就像在使用第一页之前访问一样，面板中ul上的jQuery移动样式消失了。

我在创建面板后尝试将enhanceWithin（）添加到代码中但我必须遗漏一些东西，它加载了同一个面板，如果从另一个页面重新加载，样式会如何丢失？

来源

<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 and 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 and Features</h1>
        <a href="#page"><p>Lorem ipsum</p>
    </div><!-- /content -->

    <div data-role="footer" data-position="fixed">
        <p>Content TBD</p>
    </div>

</div>

和脚本：

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

编辑：这很难解释，所以如果您访问第一页，id=page菜单会加载传统的jQuery移动样式。如果您在第一页开始后导航到第二页（id=page"），则样式很好。 IF 您，现在id="page2"点击重新加载＆＃39;在您的浏览器上按钮，面板的样式消失了，如果您导航回id="page"，它仍然消失。因此，除非第一页是起点，否则样式永远不会应用，这是否有意义？

Answer 1

在加载第二页时使用：

.trigger('create');

使用此选项重新创建第2页的面板。

更多信息：

Reference

jQuery mobile - 从初始页面以外的任何页面加载时删除了面板样式

1 个答案: