私はこの問題で数日間立ち往生しています。簡単にするために、2 つのページ(<div data-role="page" id="page1">...</div>
と;<div data-role="page" id="page2">...</div>)
を実行する JS スクリプトがあります。changePage("#page2")
その結果、URL は正しく変更されますが、表示されるページは最初のページのままです。F5 キーを押すと、2 ページ目に更新されます。なぜこれを行うのか本当にわかりません。どんな助けでも大歓迎です!
ここに私の簡略化されたコードがあります:
<!DOCTYPE html>
<html>
<head>
$view->jQuery()->setLocalPath('/js/jquery-1.9.1.min.js');
$view->jQuery()->addJavascriptFile('/js/jquery.mobile-1.3.1.js');
</head>
<body>
<div class="tite"> Title</div>
<form ...>
<div class="zend_form">
<div data-role="page" id="page1">
<div data-role="header" data-backbtn="false"> ... </div>
<div class="title"> Another title </div>
<div data-role="content">
...
...
<a data-role="button" class="validPartial" href="#">Submit</a>
</div>
<div data-role="footer"> ... </div>
</div>
<div data-role="page" id="page2">
<div data-role="header" data-backbtn="false"> ... </div>
<div class="title"> Second page title </div>
<div data-role="content">
...
</div>
<div data-role="footer"> ... </div>
</div>
</div>
</form>
<p>
Some text added by JQuery
</p>
<script>
$(document).ready(function() {
$('.validPartial').tap(function(e){
$.mobile.changePage("#page2");
});
});
</script>
</body>
</html>