Jquery mobile JQuery Mobile 1.3.0可折叠嵌套列表未正确呈现

Jquery mobile JQuery Mobile 1.3.0可折叠嵌套列表未正确呈现,jquery-mobile,Jquery Mobile,我有一个动态插入DOM的JQM页面,每次都必须重新生成,因为数据可能会更改。第一次显示页面时,一切正常,但如果用户稍后返回此页面,则会出现以下呈现问题。以下是已关闭的列表: 以下是第二次查看屏幕时打开的列表: 我尝试了$(id selector).trigger('create')、.remove()、和.empty()的各种组合,但到目前为止,没有任何东西能让页面第二次像第一次一样工作 值得一提的是,由于这似乎是JQM的一个问题,我正在寻找解决办法,下面是构建此列表的代码: var url

我有一个动态插入DOM的JQM页面,每次都必须重新生成,因为数据可能会更改。第一次显示页面时,一切正常,但如果用户稍后返回此页面,则会出现以下呈现问题。以下是已关闭的列表:

以下是第二次查看屏幕时打开的列表:

我尝试了
$(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>';

如果我尝试在appendTo()之前执行$('#newsletter').remove(),则appendTo()不起作用。我无法使用展开事件强制列表重新绘制自身,因为事件在展开之前触发

好的,问题似乎是对同一个id多次使用
new\u screen.appendTo($.mobile.pageContainer)
。我曾尝试使用
$('#'+id).empty().remove()
删除它,如果它在
appendTo()
之前已经存在,但我无法再次添加它(也许有人可以帮助我理解为什么我不能这样做)。因此,我尝试更新容器,如果它已经存在,并修复了问题。我想了解多次添加该项如何导致我得到的结果

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);
}
if($('#'+id).length>0){
var html=脚本+正文;
//更新现有页面容器
$(id).html(html);
}否则{
var html=''
+脚本+正文+“”;
var new_screen=$(html);
//向DOM添加新页面容器
新建屏幕.appendTo($.mobile.pageContainer);
}

请向我们展示一些代码。您使用
数据rel=back
或其他方法?我确实有一个使用rel-back的按钮。我在编辑中包含了代码,但我希望找到一个解决方法,使JQM正确地重新绘制列表。上面的代码是在哪个页面显示事件上生成的?例如
pageinit
pagebeforeshow
。等等。您认为呢se
$('.selector')。可折叠();
之后?
var new_screen = $(html);
new_screen.appendTo($.mobile.pageContainer);
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);
}