0

DOMに動的に挿入されるJQMページがあり、データが変更される可能性があるため、毎回再生成する必要があります。ページが最初に表示されたときはすべて正常に機能しますが、後でユーザーがこのページに戻った場合、次のレンダリングの問題が発生します。閉じたリストは次のとおりです。

折りたたみ可能なリスト、閉じた

画面の2回目の表示で開いているリストは次のとおりです。

ここに画像の説明を入力してください

、、、のさまざまな組み合わせを試しましたが$(id-selector).trigger('create')、これまでのところ、最初のページのように2回目のページが機能することは.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（）が機能しません。拡張が発生する前にイベントが発生するため、拡張イベントを使用してリスト自体を強制的に再描画することはできません。

4

1 に答える 1

0

わかりました。問題はnew_screen.appendTo($.mobile.pageContainer)、同じIDに対して複数回使用されていることのようです。$('#' + 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);
}
于 2013-03-27T06:04:01.837 に答える