$.get
私の jQuery Mobile ページは、イベントにバインドされているコンテンツをロードしません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モバイルコード:
$( 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スタイルでフォーマットしてエコーバックするデータを取得します。
head
jQuery Mobile は後続のページで DOM に読み込まれないことがわかっているため、アプリのランディング ページである head にmain.js
も含まれています。index.html
新しいページへのすべての移行は、通常の ajax クエリによって行われます (デフォルトの動作を妨げません)。
それでどうなるの?イベントに移動するとigra.html?battlefield=3
発生しますが、php ページからpageinit
読み込んだコンテンツが$.get
挿入されません! F5 (更新) を押すと、コンテンツがページに読み込まれます。誰でも説明して助けてもらえますか?:) ありがとうございました!