JQuery Mobile 1.3.0可摺疊嵌套列表沒有正確呈現

我有一個動態插入DOM的JQM頁面，必須每次都重新生成一次，因爲數據可能會發生變化。第一次顯示頁面時，一切都按原樣運行，但如果用戶稍後返回此頁面，則會出現以下渲染問題。下面是報名截止：JQuery Mobile 1.3.0可摺疊嵌套列表沒有正確呈現

The collapsible list, closed

這裏是名單上的第二觀看屏幕的打開：

enter image description here

我試過的$(id-selector).trigger('create')各種組合，.remove()和.empty() ，但是到目前爲止，沒有任何東西能夠讓頁面第二次像第一次那樣工作。

對於它的價值，因爲這似乎是一個JQM一個問題，我努力尋找一種解決方法，下面是建立此列表代碼：

var url_base_key = resource.url + '_base'; 
html += '<div data-role="collapsible-set" data-inset="false" id="per-back-issues">'; 
if (window.per_info.back_issues.length > 0){ 
    html += '<br /><p><b>' + Label('label_back_issues') + '</b></p>'; 
    for (var i = 0; i < window.per_info.back_issues.length; i++){ 
     var group = window.per_info.back_issues[i]; 
     if (group.issues.length > 0){ 
      html += '<div data-role="collapsible" class="per_group" id="per-group-' + group.group + '"><h2 id="group-label-' + group.group + '">' + group.group + '</h2><ul data-role="listview">'; 
      for(var j = 0; j < group.issues.length; j++){ 
       var issue = group.issues[j]; 
       var url_base = window.orgbase_api[url_base_key]; 
       var url = url_base + issue.formats[0].file; 
       var id = resource.orgbaseapi_url + '-' + issue.year + '-' + issue.month + '-lit_menu_item'; 
       var item = '<li class="per_item">' + GetPdfLink(resource.id, id, url, GetLongMonth('gregorian', issue.month)) + '</li>' 
       html += item; 
      } 
      html += '</ul></div>'; 
     } 
    } 
} 
html += '</div>';

此內容被包裹在一個JQM頁面容器

<div id="newsletter" data-role="page" data-theme="b" data-content-theme="b"> 
    <div data-role="header"> 
     <a href="#" data-rel="back" data-role="button" data-icon="back" data-mini="true" class="ui-btn-left" data-iconpos="notext" data-direction="reverse" data-transition="slide">Back</a> 
     <h1>Newsletter</h1> 
     <a href="#home" data-role="button" data-icon="home" data-mini="true" class="ui-btn-right" data-iconpos="notext" data-direction="reverse" data-transition="slide">Home</a> 
    </div> 
... 
</div>

，並添加到DOM每次與

var new_screen = $(html); 
new_screen.appendTo($.mobile.pageContainer);

如果我嘗試做$（'＃newsletter'）。remove（）在appendTo（）之前，appendTo（）不起作用。我無法使用展開事件來強制列表重繪，因爲事件在之前觸發發生擴展。

來源

2013-03-26 chrysanhy

給我們一些代碼。你使用'data-rel = back'或其他方法？ – Omar 2013-03-26 10:29:27

我有一個使用rel-back的按鈕。我在我的編輯中包含了代碼，但我希望有一個解決方法可以使JQM正確地重新繪製列表。 – chrysanhy 2013-03-26 15:45:36

上面的代碼是在哪個頁面顯示事件生成的？例如'pageinit'，'pagebeforeshow'..etc是否使用'$（'。selector'）。collapsible（）;'之後？ – Omar 2013-03-26 17:03:35

好的，問題似乎是多次使用相同的ID的new_screen.appendTo($.mobile.pageContainer)。如果appendTo()之前已經存在，我曾嘗試使用$('#' + id).empty().remove()將其刪除，但我無法再添加它（也許有人可以幫助我理解爲什麼我不能這樣做）。所以我試着更新容器，如果它已經存在並且解決了問題。我想了解如何多次添加該項目導致我得到的結果。

if ($('#' + id).length > 0){ 
    var html = script + body; 
    //update existing page container 
    $(id).html(html); 
} else { 
    var html = '<div id="' + id + '" data-role="page" data-url="' + id 
     + '" data-theme="' + theme + '" data-content-theme="' + theme + '" class="screen_section">' 
     + script + body + '</div>'; 
    var new_screen = $(html);    
    //add new page container to DOM 
    new_screen.appendTo($.mobile.pageContainer); 
}

來源

2013-03-27 06:04:01 chrysanhy

JQuery Mobile 1.3.0可摺疊嵌套列表沒有正確呈現

回答

相關問題