Jquery Mobile Panel样式问题

Question

你好，我正在使用下面的代码将滑动面板加载到我的页面，并从外部html文件中加载<li>内容。问题是，当我从外部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>

在我体内

<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

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

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

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