我有一个使用 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();
}
});
但没有结果。我完全接受了挑战,如果有人能告诉我该怎么做,我将不胜感激。