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" ...

Jquerymobile ajax响应元素不接受CSS

1 个答案: