jquery-mobile - jQuery Mobile - 操作 DOM - 刷新页面

Question

整个 jQuery 移动动态数据(从服务器拉取数据)让我抓狂。为什么操作 DOM 和刷新页面如此困难？

我有我的页面:

<div data-role="page" id="intranet-holidays" data-title="HOLIDAYS" data-add-back-btn="true"></div>

在 document.ready 中我有以下内容:

$( document ).delegate( "#intranet-holidays", "pagebeforecreate", function() {
   $('body').addClass('ui-loading');
   $.mobile.loadingMessage = "Loading Holidays...";
   $.mobile.showPageLoadingMsg();
   // calls getJSON to retrieve data from the web server
   loadHolidays();
});

当我的数据从服务器返回时，我将可折叠的 DIV 添加到我的页面中 (intranet-holidays)。

在可折叠的 DIV 中，我有一些 UL。

我知道我的语法是正确的，因为我可以抓取生成的 HTML，将其保存到一个文件中，然后显示该文件，并且一切都正确显示。这是一个屏幕截图:

这是我动态加载的页面的样子(不是我想要的):

我知道我可以使用以下内容刷新 ListView :

$('#list').listview('refresh');

这对于列表非常有用。

如何刷新页面(包含可折叠 DIV 且那些可折叠 DIV 包含 UL)？

是的，我希望页面中的所有数据都是动态的。

Answer 1

在获取 JSON 数据的 AJAX 调用的 success 处理程序方法中，添加 $('#intranet-holidays').trigger('create');创建列表后。