Jquery mobile listview格式化文本无法通过php工作

Question

我在 Javascript 中有以下功能。

function showInfo(str)
{
if (str=="")
{
    document.getElementById("txtHint").innerHTML="";
    return;
} 

if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
    xmlhttp=new XMLHttpRequest();
}

else
{// code for IE6, IE5
    xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}

xmlhttp.onreadystatechange=function()
{
    if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
        document.getElementById("txtHint").innerHTML=xmlhttp.responseText;
    }
}

xmlhttp.open("GET","information.php?q="+str,true);
xmlhttp.send();
}

我创建了一个选择，这样一旦选择了某个内容，它就会显示一个列表。

<ul>
        <li><select name="days" id="days" onchange="showInfo(this.value)" data-native-menu="false">
            <option value="">  select   </option>
            <option value="1"> option 1 </option>
            <option value="2"> option 2 </option>
        </select></li>
</ul>

information.php 获取值并查询数据库以在列表中获取我想要的信息。这一切都很好，但是当我想显示列表时，它的格式不正确。

echo '
<ul data-role="listview">
<li>
    <h3>Author:'.$the_author.'</h3>
    <p><b>Description:</b>'.$description.'</p>
    <p class="ui-li-aside">Last update:'.$date.'</p>
</li>
    //Etc.
</ul>
';

现在显示的列表应该与 jquery mobile demos (http://demos.jquerymobile.com/1.0.1/docs/lists/lists-formatting.html) 中的列表相似

但是它看起来像一个标准的 html 列表。

Answer 1

因为您正在动态创建 <UL> 元素而不仅仅是列表项，所以您需要在设置 HTML 后在 txtHint 上调用 enhanceWithin() (http://api.jquerymobile.com/enhanceWithin/)

而不是这个：

xmlhttp.onreadystatechange=function()
{
    if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
        document.getElementById("txtHint").innerHTML=xmlhttp.responseText;
    }
}

试试

xmlhttp.onreadystatechange=function()
{
    if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
        $('#txtHint').append(xmlhttp.responseText).enhanceWithin();
    }
}

这是一个带有模拟 AJAX 调用的工作 DEMO