php - jquery mobile丢失了带有ajax post的css

Question

我正在使用 jQuery Mobile 创建一个移动应用程序，但我遇到了一个小问题。我想创建一个列表，其中包含我从 ajax 帖子中获得的数据库中的一些内容。

标记如下所示：

<div data-role="page">
<div data-role="header">
    <h1>Facturen</h1>
</div><!-- /header -->

<div data-role="content">   
    <ul data-role="listview" data-inset="true" id="Invoices">
        <div id="invoiceList"></div>
    </ul>
</div><!-- /content -->

<div data-role="footer">
    <h4>Page Footer</h4>
</div><!-- /footer -->

这是 jQuery：

$.ajax({
        type: "POST",
        url: "invoices/index.php",
        data: '',
        complete: function(data)
        {
            $('#invoiceList').html(data.responseText);
        }
    });

好吧，我把查询的结果放在

但在某种程度上，列表的 CSS 不起作用。

如果我尝试这样做，效果很好：

<ul data-role="listview" data-inset="true" id="Invoices">
        <li>test</li>
        <li>test</li>
        <li>test</li>
        <li>test</li>
    </ul>

有人知道如何解决这个问题吗？

提前致谢！

Answer 1

尝试将您添加到ul元素id中class invoiceList，因为您将元素附加到li元素中div并且格式将不起作用：

<ul data-role="listview" data-inset="true" id="Invoices" class="invoiceList">

</ul>

<script>
$.ajax({
    type: "POST",
    url: "invoices/index.php",
    data: '',
    complete: function(data)
    {
        $('.invoiceList').html(data.responseText);
    }
});
</script>

Answer 2

在 jQuery Mobile 中，每当您更新元素时​​，通常都会有一个后续步骤，您会在该步骤上触发操作。例如，当您将新事物添加到未排序列表中时，您需要调用

$('#invoiceList').listview('refresh');

这将在将这些元素添加到complete:回调中的 UL 后立即进行。

如果这不会产生您正在寻找的行为，您还可以尝试其他各种方法。例如，您可能需要执行.append()操作而不是使用.html(). 在这种情况下，我更频繁地看到这种用法。