动态内容在 jQuery Mobile 中未正确显示

Question

我有一个使用 PhoneGap 和 jQuery Mobile 构建的移动应用程序。当用户单击链接时，应用程序会从 SQLite 数据库中获取动态内容。数据使用 jQM 的可折叠集（手风琴）进行格式化。这是代码。

用户导航到正确页面的菜单：

<!-- data-role="page" id="mainmenu" -->
<ul data-role="listview" data-theme="c">
  <li><a id="news_link" href="#"> News</a></li>
  <li><a id="news_link" href="#"> Jokes</a></li>
  <li><a id="news_link" href="#"> Rumours</a></li>
</ul>

<!-- data-role="page" id="mainmenu" -->
<div data-role="page" id="news" data-title="AreApp News" data-theme="c">
    <div data-role="header" data-theme="c"></div><!-- /header -->
    <div id="newscontent" data-role="content" data-content-theme="c"></div>
    <div data-role="footer"></div>
</div>

下面我使用被点击元素的id检测点击事件，并调用数据库加载函数，获取内容并将其放入正确的div。

$(function() {
    $('#news_link').click(function(){ // event handler of newslink
        loadNewsFromDB(function(){
            $.mobile.changePage( $("#news"), { transition: "slideup"} 
         );
    });
});

function loadNewsFromDB(callback){
    //DB-logic and html code generation here....
    $(htmlStr).appendTo( "#newscontent" ).trigger( "create" );
    $("#newscontent").html(htmlStr);
}

当我第一次点击链接时，逻辑运行得很好。但是当我按下手机的“返回”按钮，回到主菜单并再次单击链接时，内容格式不正确。我的意思是它显示新闻，但格式不好，因为它应该使用可折叠集合但它不是。

我尝试通过将函数的使用绑定到 jQuery 的 remove() 和 empty() 函数来清除内容

$(document).bind( "pagebeforechange", function( e, data ) {
    var obj = $.mobile.path.parseUrl( data.toPage );
    if(obj.hash=="#mainmenu"){
        $('#news-collapsible').empty().remove();
    }
});

但没有结果。我完全接受了挑战，如果有人能告诉我该怎么做，我将不胜感激。

Answer 1

您需要刷新此可折叠集。

$('#newscontent').collapsibleset('refresh');