我知道有很多Q& A关于触发刷新jQuery Mobile中的内容,我已经阅读了大部分内容,但是我无法在次要页面刷新页面后初始化dragend.js。
menu.php是一个使用dragend.js的滑动菜单。一切正常。如果我导航到第2页然后返回菜单,一切仍然有效。如果我导航到第2页然后刷新该页面然后导航到菜单,则滑动脚本将失败。
任何帮助glady赞赏。
menu.php
<head>
<link rel="stylesheet" href="css/jqm.css" />
<script src="js/jquery.js"></script>
<script>
$(document).bind("mobileinit", function() {
$.mobile.page.prototype.options.domCache = true;
});
</script>
<script src="js/jqm.js"></script>
<script src="js/dragend.js"></script>
<script>
$(document).on("pagecontainershow", function() {
var BODY = $("body"),
container = $("#swipe"),
pageElements;
$(window).on("ready resize", function(event) {
var width = $(this).width(),
itemsInPage = 1;
if (width > 300) {
itemsInPage = 4
}
container.dragend({
pageContainer: "#container",
itemsInPage: itemsInPage,
pageClass: "item",
afterInitialize: function() {
this.container.style.visibility = "visible";
}});
});
});
</script>
</head>
<body>
<div data-role="page" id="menu">
<div data-role="content">
<ul id="swipe">
<li class="item"><a href="#" id="item1">Link one</a></li>
<li class="item"><a href="#" id="item2">Link two</a></li>
<li class="item"><a href="#" id="item3">Link three</a></li>
<li class="item"><a href="#" id="item4">Link four</a></li>
<li class="item"><a href="#" id="item5">Link five</a></li>
<li class="item"><a href="#" id="item6">Link six</a></li>
<li class="item"><a href="#" id="item7">Link seven</a></li>
<li class="item"><a href="#" id="item8">Link eight</a></li>
<li class="item"><a href="#" id="item9">Link nine</a></li>
</ul>
</div>
</div>
</body>
使page2.php
head as above
<body>
<div data-role="page" id="another-page">
<div data-role="content">
Another page content.
<a href="menu.php">Menu</a>
</div>
</div>
</body>