0
因此，我有一個應用程序，它允許您添加數據，然後顯示所有數據（仍然是wip）。所以我使用localStorage和jQueryMobile和jQueryUI創建了一個創建和讀取功能。意外的數據表示
但由於某些原因，當我在頁面（主頁面/添加數據頁面）之間切換時，我在主頁面上看到了克隆數據。而不是2個條目，我看到4個條目，並且它是原始的2個條目具有彼此的副本。當我刷新頁面時，它工作正常，它只顯示原始數據，沒有克隆。請注意，只有當您進入添加頁面並返回主頁面時（通過單擊主頁按鈕）纔會發生這種情況。
而且當您添加來看，由於某種原因，在同一時間加入2個運行（運行時添加功能可按2倍）
下面是代碼：
$(document).on('pageinit', function() {
//Display runs
showRuns();
//Add Handler for Adding Runs
$('#submitAdd').on('tap', addRun);
/*
* Show all runs on homepage
*/
function showRuns() {
//get runs Object
var runs = getRunsObject();
var i = 0;
if (runs != '' && runs != null) {
for (i; i < runs.length; i++) {
$('#stats').append('<li class="ui-body-inherit ui-li-static"><strong>Date: </strong>' + runs[i]["date"] + '<strong> <br/>Distnace: </strong>' + runs[i]["kms"] + 'km</li>');
}
$('#home').bind('pageinit', function() {
$('#stats').listview('refresh');
});
}
}
/*
* addRun function
*/
function addRun() {
//Get form values
var kms = $('#addKms').val();
var date = $('#addDate').val();
//Create 'Run' Object
var run = {
date: date,
kms: parseFloat(kms)
};
var runs = getRunsObject();
//Add run to runs array
runs.push(run);
alert('Run Added');
//Set stringified objects to localstorage
localStorage.setItem('runs', JSON.stringify(runs));
//Redirect
window.location.href = "index.php";
//Preventing form from submiting
return false;
}
/*
* getRunsObject
*/
function getRunsObject() {
//Set runs array
var runs = [];
//Get current runs from localStorage
var currentRuns = localStorage.getItem('runs');
//Check localStorage
if (currentRuns != null) {
//Set to runs
var runs = JSON.parse(currentRuns);
}
//Return sorted runs object
return runs.sort(function(a, b) {
return new Date(b.date) - new Date(a.date);
});
}
});body {
text-align: center;
}
ul {
display: block;
}
.controls {
float: right;
}<!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="#home" data-transition="none" data-icon="home">Home</a>
</li>
<li>
<a href="#add" 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" 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="#home" data-transition="none" data-icon="home">Home</a>
</li>
<li>
<a href="#add" data-transition="none" data-icon="plus">Add Run</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>
</body>
</html>由於某些原因，此示例不在StackOverflow中加載，因此以下是現場演示：
http://runningtracker.herokuapp.com/index.php
嘗試添加新的運行，然後切換回添加頁面，然後返回主頁面。
如果我用這個替換我的重定向，它仍然執行addRun兩次，以及showRuns。所以我仍然必須使用一個而不是on。 – Tachi
我還沒有推送您的更改。我會在1分鐘內完成。順便說一句，如果使用你的方法，$（「＃結果」）沒有更新後，我添加新的運行，我不得不重新加載頁面，看看他們。 – Tachi
好的讓我檢查 – Sga