.load() 信息无法识别 CSS 样式 [重复]答案

【问题标题】：.load() info is not recognizing the CSS styles [duplicate].load() 信息无法识别 CSS 样式 [重复]
【发布时间】：2014-04-10 16:08:12
【问题描述】：

我正在制作一个 HTML5 应用程序，我正在使用 jQuery 的 .load() 函数将数据库中的数据加载到 HTML 中。该功能工作得很好，但问题是加载的 HTML 代码没有被样式表（jQuery Mobile）修改。我这样做的原因是因为我将使用 PhoneGap Build 来获取一个 android 应用程序。

这是我的代码分解：

头：

<head> 
<title>Parking Lot App</title>
<meta name="viewport" content="width=device-width, initial-scale=1" />

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.1/jquery.mobile.structure-1.3.1.min.css" />
<link rel="stylesheet" href="themes/florida_tech.min.css" />

<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
    <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
    <script src="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js"></script>

<script type="text/javascript">
    $(document).ready(function(){
    $( "#maps" ).get( "map_list.php");
    window.setTimeout(function(){ document.location.reload(true); }, 10000);
    });
</script>

</head>

身体：

<body>  

    <!-- HOME PAGE -->
    <div data-role="page" id="home_page" class="name"  data-theme="a">

    <!-- HEADER HOME PAGE -->

<div data-role='header' id='header'>
    <h2>
    Parking Lot App
    </h2>
    <a href='index.html' data-iconpos='notext' data-icon='home'></a>
</div>

    <!-- CONTENT HOME PAGE -->
<div data-role="content" data-theme="a" id="maps">

</div>

    <!-- FOOTER HOME PAGE -->

<div data-role="footer" data-position="fixed">
    <h3> Senior Design Project </h3>
</div>

</div> <!-- END OF HOME PAGE -->

</body>

最后是我遇到问题的文件（加载后），MAP_LIST.PHP：

<ul data-role="listview" data-inset="true" data-divider-theme="a" data-count-theme="b">
<li data-role="list-divider"> Parking Lots </li>
<li>
    <a href="#mapdata1" 
    data-inline="true"

    > Parking Lot 1
    <span class="ui-li-count">0</span></a></li><li><a href='#info'> Help </a></li>
</ul>

我想知道是否有另一种/更好的方法可以将数据库中的数据粘贴到我的 HTML 代码中，以便样式可以修改代码。

【问题讨论】：

@adeneo 我不认为 duplicate answer 可以回答这个问题。
insdie "MAP_LIST.PHP"，特别是在 ul $("ul").listview() 内部。
@Omar - 它完美地回答了这个问题，当在 jQuery Mobile 中添加动态内容时，必须触发“创建”方法来更新。
@adeneo 在使用 .append() 时与使用 .load() 或 .get() 不同。测试自己。
@adeneo 我刚刚尝试.trigger("create") 没有成功..

标签： javascript css jquery-mobile jquery-mobile-listview

【解决方案1】：

当使用 .load() 或 .get() 时与使用 insertion 函数不同，例如append()/prepend()。前面的函数使用Ajax拉取数据，所以需要在Ajax调用完成后调用增强。

使用.get()

$.get("URL", function (data) {
   var list = $(data).find("#listID");
   $("#target_div").append(list);
   $("#listID").listview();
}, "html");

在URL中，给listview一个id。

Demo - Code

【讨论】：