1

我正在为搜索引擎构建移动界面。主 CGI 脚本以<ul>. 然后我有一个 JQM 脚本，它遍历每个列表项并向另一个 CGI 脚本发出 Ajax 请求，以收集更多信息并将其作为嵌套的<ul>. 机械工作正常，我只是遇到了显示器的问题，看起来不像我预期的那样。

首先，我将向您展示我的代码，然后是我希望看到的，最后是我实际看到的。

这是主要 CGI 脚本生成的 HTML 的截断版本（来自 Firebug，所以在 jQuery 使用它之后它是邪恶的），实际上有许多列表元素，但我只是展示一个作为插图：

<ul id="searchresults" data-role="listview" class="ui-listview">
    <li id="64076268" class="result_item ui-li ui-li-static ui-btn-up-b ui-li-has-count">
        <a href="#indexPage&amp;ui-page=searchresults-0">
            <h1 class="ui-li-heading">Programming Perl / Tom Christiansen, Brian D. Foy &amp; Larry Wall.</h1>
            <p class="creator ui-li-desc">Tom Christiansen brian d foy; Larry Wall; Larry Wall</p>
            <p class="ui-li-desc">c2012</p>
            <span class="ui-li-count ui-btn-up-c ui-btn-corner-all">2 versions</span>
        </a>
    </li>
</ul>

该<a>元素是由 jQuery 生成的，我不明白为什么。我期待的是这样的：

<ul id="searchresults" data-role="listview" class="ui-listview">
    <li id="64076268" class="result_item ui-li ui-li-static ui-btn-up-b ui-li-has-count">
        <h1 class="ui-li-heading">Programming Perl / Tom Christiansen, Brian D. Foy &amp; Larry Wall.</h1>
        <p class="creator ui-li-desc">Tom Christiansen brian d foy; Larry Wall; Larry Wall</p>
        <p class="ui-li-desc">c2012</p>
        <span class="ui-li-count ui-btn-up-c ui-btn-corner-all">2 versions</span>
        <ul class="frbr">
            <li>
                <h1>Programming Perl</h1>
            </li>
            <li>
                <h1>Programming Perl / Tom Christiansen, Brian D. Foy &amp; Larry Wall.</h1>
            </li>
        </ul>
    </li>
</ul>

据我了解，这应该导致嵌套<ul>的页面呈现为一个单独的页面，当用户单击父级时将显示该页面<li>。这当然是listviews 上的jQuery 文档描述它的方式。

这是抓取嵌套列表并将其附加到父级的 jQuery <li>：

$(document).ready(function(){

    $(".result_item").each(function() {

        var me = $(this);

        $.ajax({
            type: "GET",
            url: "/m/ajax/get_frbrgroup_details.cgi",
            data: { frbrgroup: me.attr("id") },
            datatype: "text",
            cache: false,
            success: function(reply) {
                me.append(reply);
            },
            complete: function() {
                $("#searchresults").listview("refresh");
            }

        })
    });
});

最后是我期望看到的和我实际看到的截图：

预期的

我实际看到的

有没有人能够对此有所了解，因为根据我所做的所有研究，我认为我做的一切都是正确的！谢谢 ：）

4

1 回答 1

0

终于想通了这个。我错过了这样一个事实，即当 JQM 在最初呈现页面时处理页面时，它将嵌套<ul>移出其 parent <li>，因此我尝试将其定位到 append 的尝试失败了，就像我的 listview("refresh") 在父级上一样<ul>. 所以我现在给嵌套<ul>一个唯一的 id，所以一旦 JQM 将它移出父级，<li>我仍然可以使用追加和刷新来定位它。似乎工作！:)

于 2012-11-12T09:43:22.677 回答