Question

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

这是我的代码分成几部分：

HEAD：

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

<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代码中，以便样式可以修改代码。

Answer 1

使用.load()或.get()时，与使用插入功能相同，例如append() / prepend()。前面的函数使用Ajax来提取数据，因此在Ajax调用完成后需要调用增强功能。

使用.get()

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

在网址中，为listview提供id。

Demo - Code

.load（）信息无法识别CSS样式

1 个答案: