当我使用 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 中会失去它的样式。 有人帮忙吗？？
最佳答案
我在这里找到答案。
jquerymobile error "cannot call methods on listview prior to initialization"
它解决了我的问题。只需添加一个 listview.refresh 方法
关于javascript - jquery mobile ajax 将内容加载到 div 元素中会丢失它的 css 样式，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/25706726/