jquery mobile ajax load content into a div element will lose it's css style

问题

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

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>

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';

}

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

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