Question

我的jQuery Mobile页面不会通过绑定到$.get事件的pageinit加载内容，但是当我点击刷新（F5）时这样做，为什么会这样呢？

我的HTML页面igra.html：

<!DOCTYPE html> 
<html>

<head>
 <meta charset="utf-8">
 <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
 <meta name="apple-mobile-web-app-capable" content="yes">
 <meta name="apple-mobile-web-app-status-bar-style" content="black">

 <!-- stili za custom temo, jquery, jquery mobile, phonegap-->
 <link rel="stylesheet" href="themes/what.min.css" />
 <link rel="stylesheet" href="jquerymobile.css" />
 <script src="jquery191.js"></script>
 <script src="jquerymobile.js"></script>
 <script src="phonegap.js"></script>
 <script src="main.js"></script>
 <link rel="stylesheet" href="stil.css" />

</head>

<body>
 <div data-role="page" id="igra">

  <div data-theme="a" data-role="header">
   <a href="index.html" data-role="button" data-theme="a" data-icon="coins" data-   inline="true" class="vibra">347 coins</a>
   <h3>WHAT?</h3>
   <a href="index.html" data-icon="domov" data-theme="a" data-inline="true" data-transition="slide" data-direction="reverse">Home</a>
  </div>

  <div data-role="content" class="igracontent"> </div>

 </div>

</body>
</html>

我的main.js使用jQuery Mobile代码：

$( document ).delegate("#igra", "pageinit", function() {

 var par = qs["battlefield"]; 

 $.get('igra.php?battlefield='+par, function(data2) {
  $('div.igracontent').append(data2).trigger('create');
 });

});

//parse url parameter
var qs = (function(a) {
 if (a == "") return {};
 var b = {};
 for (var i = 0; i < a.length; ++i)
  {
    var p=a[i].split('=');
    if (p.length != 2) continue;
    b[p[0]] = decodeURIComponent(p[1].replace(/\+/g, " "));
  }
return b;
})(window.location.search.substr(1).split('&'));

在igra.php中，我进行SQL查询并检索一些我在jQuery Mobile样式中格式化的数据并将其回显。

我知道jQuery Mobile在后续页面中不会将head加载到DOM中，因此main.js也会包含index.html头部，这是我应用的目标网页。所有到新页面的转换都是通过正常的ajax查询（我不会阻止默认行为）。

那会发生什么？当我导航到igra.html?battlefield=3 pageinit事件确实发生但我从php页面通过$.get加载的内容未插入！如果我点击F5（刷新），内容会被加载到页面中。任何人都可以解释和帮助吗？ :)谢谢！

jQuery Mobile仅在我点击刷新后加载内容

0 个答案: