javascript - jquery mobile ajax 将内容加载到 div 元素中会丢失它的 css 样式

Question

当我使用 ajax 将数据加载到 div 元素并使用 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 代码 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 文件如下:

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

}

奇怪的是，当我单击菜谱时，它会执行函数 getAjaxContent。它还正确显示了主 div 中的内容

但问题是主 div 中的元素在 jquery mobile 中会失去它的样式。有人帮忙吗？？

Answer 1

我在这里找到答案。

jquerymobile error "cannot call methods on listview prior to initialization"

它解决了我的问题。只需添加一个 listview.refresh 方法