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可折叠嵌套列表没有正确呈现

回答

相关问题