jquery移动加载页面并获取数据

Question

使用jquery mobile调用页面时遇到了麻烦。在这个例子中，我假设索引页面（index.html）将调用将包含来自我的服务器的数据的数据页面（data.html）。 在我的情况下，当我使用语法从index.html执行调用页面时：

$.mobile.changePage("data.html");

在页面data.html上我做了这个sintax：

$(document).on('pageinit', '#myDataPage', function(){    
    GetData();
});

function GetData(){
   //Ajax Function here
}

在我调用data.html之后，显然没有显示任何数据。但是，如果我这样做，手动刷新页面将成功显示从我的服务器获取的数据。我的代码有问题吗？

Answer 1

默认情况下，jQuery Mobile使用Ajax来执行页面转换。这意味着在转换过程中，jQuery Mobile将仅注入响应的body元素的内容（或者更具体地说是data-role =“page”元素，如果提供的话），这意味着将使用页面顶部的任何内容（与页面标题的例外，具体提取。）

因此，当通过Ajax加载页面时，页面头部引用的任何脚本和样式都不会产生任何影响，但如果通过HTTP正常请求页面，它们将执行。

如果您从第二页的div（script）内的head标记移动<div data-role="page" id="myDataPage">，它将会执行。另一种方法是创建一个JS文件并在第一页加载时加载JavaScript（相关示例here）。

我希望这会有所帮助。