jQuery Mobile的AJAX内容加载到div元素将失去它的CSS样式 [英] jquery mobile ajax load content into a div element will lose it's css style

问题描述

当我使用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.

<一个href="http://stackoverflow.com/questions/10373618/jquerymobile-error-cannot-call-methods-on-listview-prior-to-initialization/25707333#25707333">jquerymobile错误＆QUOT;不能调用列表视图的方法来初始化和QUOT之前，

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

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

这篇关于jQuery Mobile的AJAX内容加载到div元素将失去它的CSS样式的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！