Jquery Mobile 面板样式问题

Question

您好，我正在使用下面的代码将滑动面板加载到我的页面并加载 <li>来自外部 html 文件的内容。问题是，当我从外部 html 文件加载数据时，样式不适用。如果我将代码移到我的主 html 文件中，它就可以正常工作。在外部 html 文件中，我还加载了 .css 文件

这是我完整的工作代码，下面我将发布以及我正在尝试做的事情。

//Loading the jquery css
<link rel="stylesheet" href="css/themes/default/jquery.mobile-1.4.2.min.css">
<link rel="stylesheet" href="_assets/css/jqm-demos.css">

//Loading jquery and jquery mobile
<script type="text/javascript" src="js/jquery-1.11.0.min.js"></script>
<script src="js/jquery.mobile-1.4.2.min.js"></script>

//Before open i am loading the external file with content
<script type="text/javascript">
  $(document).on("pagecreate", "#panel-responsive-page1", function () {
    $( "#nav-panelz" ).on( "panelbeforeopen", function( event, ui ) {
      $("#loadexternal").load("external.php");
      alert('opened');
    });
  });
</script>

在我的 body 里

<div data-role="page" class="jqm-demos ui-responsive-panel" id="panel-responsive-page1" data-title="Panel responsive page"> <!-- STARTS data-role="page" -->

<div data-role="panel" data-display="push" data-theme="b" id="nav-panelz" class="mypanel" style="z-index:250000;">

<ul data-role="listview" id="loadexternal">

//at this was the code bellow and works great
<li data-icon="delete"><a href="#" data-rel="close" style="color:#09F;">Close menu</a></li>
<li><a href="#panel-responsive-page2">Menu one</a></li>
<li><a href="#panel-responsive-page2">Menu two</a></li>
</ul>

</div>


</div> <!-- ENDS data-role="page" -->

如果我删除这两行并将其放入我的 external.php 文件中，则样式不适用。

<li><a href="#panel-responsive-page2">Menu one</a></li>
<li><a href="#panel-responsive-page2">Menu two</a></li>

谢谢大家!

下面的屏幕截图将帮助您理解我的意思:

以及来自外部文件:

Answer 1

您需要增强动态注入(inject)的元素。要增强/初始化所有项目(无论其类型如何)，您需要在父 div 上调用 .enhanceWithin()。

虽然 .enhanceWithin() 应该可以完成这项工作，但是，看起来它在这里失败了。无论如何，您需要在成功加载外部元素后通过调用 .listview("refresh"); 来重新增强 listview 小部件。

$( "#nav-panelz" ).on( "panelbeforeopen", function( event, ui ) {
  $("#loadexternal").load("external.php", function () {
     $("#loadexternal").listview("refresh");
  });
});