我有一个动态插入 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>';
此内容包装在 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);
如果我尝试在 appendTo() 之前执行 $('#newsletter').remove(),则 appendTo() 不起作用。我不能使用扩展事件来强制列表重新绘制自身,因为该事件在扩展发生之前触发。