jQuery Mobile：如何在页面完全加载到DOM后进行页面转换

单页应用程序，Query Mobile 1.4.5和jQuery v1.11.1

这是可能的，点击第1页后，它应该等到第1页加载完全加载到DOM后，应该发生页面转换

因为我的第1页有一些需要一些时间加载的ajax

 Menu Page 1
 Page 2
 
 
 ...some text. 
 some data from ajax... 
  

Answer 1

如果您绝对需要等到数据完全加载，那么您可以按代码导航。 只需使用按钮而不是锚。

在下面的示例中，我链接了两个ajax请求来构建一个简单的专辑列表。 成功检索后，将对列表进行排序并重新设置页面内容：

 function gotoPage1() { $.ajax({ url: "https://jsonplaceholder.typicode.com/users", method: 'GET', crossDomain: true, dataType: "jsonp", beforeSend: function() { $.mobile.loading("show"); } }).then(function(users) { $.ajax({ url: "https://jsonplaceholder.typicode.com/albums", method: 'GET', crossDomain: true, dataType: "jsonp", success: function(albums) { $("#articles_list").empty(); $.each(albums, function(index, album) { album.userName = $.grep(users, function(user, index) { return (user.id == album.userId); })[0].name; }); albums.sort(function(a, b) { return a.userName.localeCompare(b.userName); }); $.each(albums, function(index, album) { $("#articles_list").append("
"+album.userName+"
"+album.title+"
"); }); $("#articles_list").listview({ autodividers: true, inset: true }).listview("refresh"); }, complete: function() { $.mobile.loading("hide"); $(":mobile-pagecontainer").pagecontainer("change", "#page1", {transition: "slide"}); } }); }); } 

           
 
 
Menu
 
 
 Page 1 Page 2 
 
 
 
 Back 
...some text.
 
 
 
 
 
 
 
 
 Back 
...some text.
 
 
 some other data from ajax...