当我使用AJAX将数据加载到一个div元素，并使用的jQuery moible

When I'm using ajax to load data into a div element and using jquery moible

<div data-role="page">

<div data-role="header" style="overflow:hidden;" data-position="fixed">
        <div data-role="navbar">
            <ul>
                <li><a href="#" onclick="getAjaxContent('recipe')">recipe</a></li>
                <li><a href="#" onclick="getAjaxContent('sprinkel')">sprinkel</a></li>
                <li><a href="#" onclick="getAjaxContent('fruit')">fruit</a></li>
            </ul>
        </div><!-- /navbar -->
</div><!-- /header -->

<div role="main" class="ui-content" id="main">
</div><!-- /content -->

<div data-role="footer" data-position="fixed">
    <a href="#" class="ui-btn ui-icon-shop ui-btn-icon-left checkout">checkout</a>
</div><!-- /footer -->

</div><!-- /page -->

和我写的的JavaScript code getAjaxContentL

and I wrote the javascript code getAjaxContentL

function getAjaxContent(type){
var category = type;
console.log("begin to get " + category);

var xmlhttp;
if(window.XMLHttpRequest){
     xmlhttp = new XMLHttpRequest();

}else{
      xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
console.log(xmlhttp);
xmlhttp.onreadystatechange=function(){

    if(xmlhttp.readyState==4 && xmlhttp.status==200){
    document.getElementById("main").innerHTML = xmlhttp.responseText;
    }
}      
    xmlhttp.open("GET","index.php?category="+category,true);
    xmlhttp.send();

}
</script>

和index.php文件就是象下面这样：

and the index.php file is like below:

<?php

$category = $_GET['category'];

if($category == recipe){

    echo '<ul data-role="listview" data-inset="true">
<li><a href="#">Acura</a></li>
<li><a href="#">Audi</a></li>
<li><a href="#">BMW</a></li>
<li><a href="#">Cadillac</a></li>
<li><a href="#">Ferrari</a></li>
</ul>';

}

if($category == sprinkel){

    echo 'response sprinkel';

}

if($category == fruit){
    echo 'response fruit';

}

和它的奇怪的是，当我点击的配方，将EXCUTE功能 getAjaxContent 。 还示出了它在主分区的内容正确地

and it's strange that when I click the recipe it will excute the function getAjaxContent. Also it shows the content in the main div correctly

但问题是，在主要的div元素将失去它的风格在jQuery Mobile的。 谁能帮助??

but the problem is that the element in the main div will lose it's style in jquery mobile. somebody help??

推荐答案

我在这里找到了anwser。

I find the anwser here.

jquerymobile错误＆QUOT;不能调用列表视图的方法来初始化和QUOT之前，

和它解决了我的问题.simply添加listview.refresh方法

and it solves my problem .simply add a listview.refresh method