嗨，我的 jquery 移动应用程序有问题，当我访问一个页面并返回主页并再次访问时，一些项目被重复。每次我再次访问我的页面时，这些项目都会逐渐重复。
看起来好像有某种缓存正在进行。
我的代码如下，任何帮助将不胜感激。
我正在使用 1.3.0 版的 jquery mobile 但这也发生在 1.2.0 版上
如何清除缓存或从缓存中删除页面？
<!DOCTYPE html>
<html>
<head>
<title>Bucuresti Deals</title>
<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0;" name="viewport" />
<link rel="stylesheet" href="jquery.mobile.structure-1.3.0-beta.1.min.css" />
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.0-beta.1/jquery.mobile-1.3.0-beta.1.min.css" />
<script src="jquery-1.8.3.min.js"></script>
<script src="jquery.mobile-1.3.0-beta.1.min.js"></script>
<script type="text/javascript" charset="utf-8" src="cordova-2.2.0.js"></script>
<style type="text/css">
.ui-header.ui-bar-a{
background-color: white;
}
.ui-header .ui-title {
text-indent:-9999px;
font-size:0px;
background:url(../images/headerbar.png) no-repeat 50% 2px;
height:30px;
padding:5px 0 5px 50px;
margin:0px;
}
img {
border:1px solid black;
margin-left: 10px;
}
#mainTable
{
border:2px solid;
border-radius:10px;
-moz-border-radius:25px; /* Old Firefox */
width:100%;
}
th
{
height:10px;
text-align: left;
padding-left: 10px;
}
#detail{
vertical-align:top;
}
.ui-corner-all,
.ui-corner-top,
.ui-corner-bottom,
.ui-corner-tl,
.ui-corner-tr,
.ui-corner-bl,
.ui-header .ui-btn-corner-all,
.ui-listview-filter .ui-btn-corner-all,
#restau_infos .ui-btn-corner-all,
#contact_buttons .ui-btn-corner-all,
#notation .ui-btn-corner-all{
border-radius:0.2em;
}
</style>
</head>
<body>
<div id="restaurant_detail" data-role="page" data-add-back-btn="true" data-theme="c">
<div data-role="header" data-theme="c">
<h1> Restaurant Information</h1>
<a href="index.html" class="ui-btn-right" data-icon="home" data-iconpos="notext" data-direction="reverse">Home</a>
</div>
<div data-role="content">
<div class="ui-grid-a" id="restau_info">
<div class="ui-block-a" >
<h1 id="name"></h1>
<p id="title"></p>
<p> Specials: </p>
<ul id="specials">
<li id='special1'></li>
<li id='special2'></li>
<li id='special3'></li>
<li id='special4'></li>
<li id='special5'></li>
</ul>
</div>
<div class="ui-block-b" id="infoBlock">
<p><a id="website" href="#" rel="external" data-role="button"> See our website</a></p>
</div>
</div><!-- /grid-a -->
<hr/>
<div class="ui-grid-a" id="contact_infos">
<div class="ui-block-a">
<h2 id="contactus"> Contact us</h2>
</div>
<div class="ui-block-b">
<img src="01_maps.jpg" alt="plan jeanette"/>
</div>
</div><!-- /grid-a -->
<div id="contact_buttons">
<a href="#" id="telephone" data-role="button" data-icon="tel"> Call us </a>
</div>
<hr/>
<div id="notation">
<form>
<label for="select-choice-0" class="select"><h2> User rating </h2></label>
<select name="note_utilisateur" id="note_utilisateur" data-native-menu="false" data-theme="c" >
<option value="one" class="one"> Not good at all </option>
<option value="two" class="two">Average </option>
<option value="three" class="three">Pretty good </option>
<option value="four" class="four"> Excellent </option>
</select>
</form>
</div>
<script type="text/javascript">
$( '#restaurant_detail' ).live( 'pageinit',function(event){
// get the establishment id from session data
var est_id = sessionStorage.estID;
var pass_url = "http:/MySite/getRestaurantDetail.php?est_id=" + est_id;
// Call ajax to get the restaurants in the area
$.ajax({
type:'GET',
url:pass_url,
dataType:'jsonp',
jsonp: 'jsoncallback',
timeout: 5000,
success: function(data, status)
{
$.each(data, function(i,item)
{
// Set the name of the restaurant
$("#name").text(item.rest_name);
// Set the title for restaurant
$("#title").html('<strong>' + item.rest_title + '</strong>');
// Specials
$("#special1").text(item.rest_special1);
$("#special2").text(item.rest_special2);
$("#special3").text(item.rest_special3);
$("#special4").text(item.rest_special4);
$("#special5").text(item.rest_special5);
$('#specials li:empty').remove();
// Address line 1 and 2
$("<p id='address1'>" + item.rest_address1 + "</p>").insertAfter('#contactus');
// photo
$('#infoBlock').prepend("<p id='photo'><img src='http://MySite/" + item.rest_photo_url + "' alt=" + item.rest_name + "/></p>");
// website address
$("#website").attr('href',item.rest_web_url);
$("#webiste").css('width','20px');
// telephone number
$("#telephone").attr('href', item.rest_tel);
// apply css style to span with the class of ui-icon-tel
$(".ui-icon-tel").css("background","url('../images/phone_icon.png') no-repeat");
});
},
error: function(data)
{
}
});
var SelectedOptionClass = $('option:selected').attr('class');
$('div.ui-select').addClass(SelectedOptionClass);
$('#note_utilisateur').live('change', function(){
$('div.ui-select').removeClass(SelectedOptionClass);
SelectedOptionClass = $('option:selected').attr('class');
$('div.ui-select').addClass(SelectedOptionClass);
});
});
</script>
</div>
</div><!-- /page -->
</body>
</html>
PHP服务器端代码
<?php
header('Content-type: application/json');
$est_id = $_GET['est_id'];
$server = "server";
$username = "username";
$password = "pass";
$database = "database";
$con = mysql_connect($server, $username, $password) or die ("Could not connect: " . mysql_error());
mysql_select_db($database, $con);
$sql = 'SELECT establishments.establishment_id AS estID,
name AS rest_name,
title AS rest_title,
special_1 AS rest_special1,
special_2 AS rest_special2,
special_3 AS rest_special3,
special_4 AS rest_special4,
special_5 AS rest_special5,
website_address AS rest_web_url,
address AS rest_address1,
telephone_num AS rest_tel,
description AS rest_desc,
photo_url AS rest_photo_url
FROM bucurestideals1.establishments
WHERE establishments.establishment_id ="'.$est_id.'"';
$result = mysql_query($sql) or die ("Query error: " . mysql_error());
$records = array();
while($row = mysql_fetch_assoc($result)) {
$records[] = $row;
}
mysql_close($con);
echo $_GET['jsoncallback'].'(' . json_encode($records) . ');';
?>
我能够通过 1. 将函数从 .live 更改为 .on 并在执行函数结束时返回 false 来解决这个问题，即
// apply css style to span with the class of ui-icon-tel
$(".ui-icon-tel").css("background","url('../images/phone_icon.png') no-repeat");
});
return false;
},
error: function(data)
{
}
});