意外的pagecontainer更改行为 [英] Unexpected pagecontainer change behavior
本文介绍了意外的pagecontainer更改行为的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
所以我有一个页面，我想使用下一个函数加载该页面:
So I have this a page, that I want to load using next function:
//Function to Redirect to add page
function redirectAdd() {
$("body").pagecontainer("change", "#add", {
transition : "fade"
});
}
并且我有要重定向的页面.但是此刻，我将其重定向回主页.
And I have page that I want to be redirected. But at the moment I redirect to it, I get redirected back to the main page.
$(document).on("pagecreate", "#home", function() {
//Redirections
$('#addRun').on("tap", redirectAdd);
$('#home').on("tap", redirectHome);
$('#editRun').on("tap", redirectEdit);
//Function to Redirect to home page
function redirectHome() {
$("body").pagecontainer("change", "#home", {
transition: "fade"
});
}
//Function to Redirect to add page
function redirectAdd() {
$("body").pagecontainer("change", "#add", {
transition: "fade"
});
}
});
<!DOCTYPE html>
<html>
<head>
<title>Running Tracker</title>
<link rel="stylesheet" href="css/style.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jquerymobile/1.4.5/jquery.mobile.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquerymobile/1.4.5/jquery.mobile.min.js"></script>
<script src="js/script.js"></script>
</head>
<body>
<!-- Main Page -->
<div data-role="page" id="home">
<header data-role="header" data-theme="a">
<h1>Running Tracker</h1>
</header>
<div data-role="navbar">
<ul>
<li>
<a href="#" id="addRun" data-transition="none" data-icon="plus">Add Run</a>
</li>
</ul>
</div>
<div data-role="content">
<h3>Welcome to the RunningTracker App</h3>
<p>
With this app you can track your running, jogging or walking.
</p>
<h3>Your Latest Runs:</h3>
<ul id="stats" class="current" data-role="listview" data-filter="true" data-filter-placeholder="Filter runs by date or distance." data-inset="true"></ul>
<br/>
<button id="clearRuns" onclick="return confirm('Are You Sure?')">
Clear Data
</button>
</div>
<footer data-role="footer">
<h4>RunningTracker © 2015 GZ</h4>
</footer>
</div>
<!-- Add Run Page -->
<div data-role="page" id="add">
<header data-role="header" data-theme="a">
<h1>Running Tracker</h1>
</header>
<div data-role="navbar">
<ul>
<li>
<a href="#" id="#home" data-transition="none" data-icon="home">Home</a>
</li>
</ul>
</div>
<div data-role="content">
<h3>Add Run</h3>
<form id="addForm">
<label for="km">Enter Kilometres:</label>
<input type="number" id="addKms">
<label for="km">Enter Date:</label>
<input type="date" data-role="date" class="date" id="addDate" data-inline="true">
<button id="submitAdd" class="ui-btn ui-corner-all">
Add Run
</button>
</form>
</div>
<footer data-role="footer">
<h4>RunningTracker © 2015 GZ</h4>
</footer>
</div>
<!-- Add Edit Page -->
<div data-role="page" id="edit">
<header data-role="header" data-theme="a">
<h1>Running Tracker</h1>
</header>
<div data-role="navbar">
<ul>
<li>
<a href="#home" data-transition="none" data-icon="home">Home</a>
</li>
</ul>
</div>
<div data-role="content">
<h3>Edit Run</h3>
<form id="addForm">
<label for="km">Enter Kilometres:</label>
<input type="number" id="editKms">
<label for="km">Enter Date:</label>
<input type="date" data-role="date" class="date" id="editDate" data-inline="true">
<button id="submitEdit" class="ui-btn ui-corner-all">
Update
</button>
</form>
</div>
<footer data-role="footer">
<h4>RunningTracker © 2015 GZ</h4>
</footer>
</div>
</body>
</html>
这是实时演示，因为未加载StackOverflow示例: http://runningtracker.herokuapp.com/
So Here is live demo, because StackOverflow example is not loading: http://runningtracker.herokuapp.com/
因此，当我单击添加运行"时，它应该重定向到#add页面，但是会重定向回home页面
So when I click Add Run it should redirect to #add page, it does, but then it redirects back to home page
如何防止它发生?
推荐答案
您可以通过在点击处理程序上返回false来防止锚链接重新加载页面:
You can prevent the anchor link from reloading the page by returning false on the tap handler:
function redirectAdd(e) {
$("body").pagecontainer("change", "#add", {
transition: "fade"
});
return false;
}
这篇关于意外的pagecontainer更改行为的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
