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使用click事件检测，并调用数据库加载函数，该函数获取并将内容放入正确的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');

动态内容在jQuery Mobile中无法正常显示

1 个答案: