Jquerymobile ajax响应元素不接受css

Question

我正在尝试在我的虚拟应用程序中实现国家/地区搜索。最初在主页上，我使用列表视图并且它显示正确。但是相同的列表视图，如果我使用 ajax 显示，列表视图内容正在显示，但 css 不应用于此。

请点击以下链接查看虚拟应用程序： http://questoons.com/vkwave/sof/ajaxrequest/

在虚拟应用程序中，最初列表视图显示正确，但是当单击“调用 Ajax 并填充国家列表”时，我使用 ajax 发送整个列表数据，如下所示：

<ul data-role="listview" data-filter="true" data-filter-placeholder="Search Country/Group..." data-filter-theme="d" data-theme="d" data-divider-theme="b">
                    <li data-role="list-divider">A</li>
                    <li data-icon="false"><a href="#"  >Afghanistan</a></li>
                    <li data-icon="false"><a href="#"  >Argentina</a></li>
                    <li data-icon="false"><a href="#"  >Australia</a></li>
                    <li data-icon="false"><a href="#"  >Austria</a></li>
                    <li data-role="list-divider">B</li>
                    <li data-icon="false"><a href="#"  >Bahamas, The</a></li>
                    <li data-icon="false"><a href="#"  >Bahrain</a></li>
                </ul>

但在 ajax 响应列表中未应用 css。请指导我哪里错了。

我使用的是普通的 jquery ajax。

Answer 1

首先加载您的 Html 是：

<ul data-divider-theme="b" data-theme="d" data-filter-theme="d" data-filter-placeholder="Search Country/Group..." data-filter="true" data-role="listview"
    class="ui-listview">
    <li data-role="list-divider" role="heading" class="ui-li ui-li-divider ui-bar-b">
        A
    </li>
    <li data-icon="false" data-corners="false" data-shadow="false" data-iconshadow="true" data-wrapperels="div" data-iconpos="right" data-theme="d"
        class="ui-btn ui-btn-icon-right ui-li ui-btn-up-d">
        <div class="ui-btn-inner ui-li">
            <div class="ui-btn-text">
                <a href="#" class="ui-link-inherit">Afghanistan</a></div>
        </div>
    </li>
</ul>

ul、li 和其他 html 元素都有一些类。但是在 ajax 响应中你错过了这个类。将 css 类添加到您的 ajax 响应中。

例如：

<ul class="ui-listview" ...
    <li class="ui-btn ui-btn-icon-right ui-li ui-btn-up-d" ...