jQuery Mobile - 嵌套列表視圖顯示問題

我正在構建搜索引擎的移動界面。主CGI腳本返回一個結果列表<ul>。然後我有一個JQM腳本遍歷每個列表項並向另一個CGI腳本發出Ajax請求以收集更多信息並將其作爲嵌套的<ul>插入。機械工作，我只是有問題，看起來不像我期望的那樣。jQuery Mobile - 嵌套列表視圖顯示問題

首先，我會告訴你我的代碼，然後看看我期望看到的，最後我實際看到的。

下面是主要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>

正在由jQuery的產生的<a>元件，我不理解爲什麼。我所期待的是：

<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>將顯示一個單獨的頁面。這絕對是jQuery文檔在列表視圖中的描述。

下面是被抓住了嵌套列表，並將它附加到父<li> jQuery的：

$(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"); 
      } 

     }) 
    }); 
});

最後的是我希望看到什麼我實際看到的截圖：

Expected

What I am actually seeing

是任何人都能夠在此有何啓示是，從我所做的所有研究中，我認爲我做的一切都是正確的！謝謝:)

來源

2012-11-08 Andrew Isherwood

終於想出了這一個。我錯過了當JQM在初始渲染時處理頁面的事實，它將嵌套的<ul>移出它的父<li>，所以我試圖用append將它作爲目標失敗，就像我的listview（「refresh」）一樣父母<ul>。所以我現在給嵌套的<ul>一個唯一的ID，所以，一旦JQM已經將它移出父節點<li>，我仍然可以使用append和refresh來定位它。似乎工作！ :)

來源

2012-11-12 09:43:22

jQuery Mobile - 嵌套列表視圖顯示問題

回答

相關問題