我正在尝试在 jQuery Mobile 中编写一个应用程序，并希望在单击链接时将项目存储在本地存储中，但由于某种原因，单击事件甚至没有触发。我的页面在下面。我希望在单击索引页面中的团队链接时触发该事件。这应该将团队 ID 存储在本地存储中，然后游戏页面将检索它并显示团队的日程安排。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>PA Football News</title>
<link rel="stylesheet" href="css/jquery-mobile.css">
<link rel="stylesheet" href="css/application.css">
<script src="js/jquery.js"></script>
<script src="js/jquery-mobile.js"></script>
<!-- <script src="phonegap.js"></script>
<script src="js/connection.js"></script>-->
</head>
<body>
<div data-role="page" id="index">
<div data-role="header" id="header" data-position="fixed"><h1>PA Football News</h1></div>
<div id="index_content" data-role="content">
<div id="message"></div>
<h3>Select Team to View Scores:</h3>
<ul id="teams_list" data-role="listview" data-inset="true" data-filter="true"></ul>
</div>
<div data-role="footer" id="footer" data-position="fixed">
<nav data-role="navbar">
<ul>
<li><a href="#index" data-transition="slide" data-icon="home">Home</a></li>
<li><a href="#info" data-transition="slide" data-icon="info">Info</a></li>
</ul>
</nav>
</div>
<script>
$(document).on("pageshow", "#index", function(event) {
console.log('This is the index page.');
$.ajax({
type: "post",
url: "http://localhost/pafootballnews/mobile/teams.php",
data: {api_key: "version1pfn"},
crossDomain: true,
dataType: "json",
error: function() {
$("#message").html('<p align="center">A server error occurred while trying to retrieve teams list.</p>').addClass("errorm");
},
success: function(data) {
if (data.response = "true") {
var html = '';
for (i=0; i<data.teams.length; i++) {
html += '<li><a class="team_link" id="' + data.teams[i].id + '" href="#games">' + data.teams[i].name + ' ' + data.teams[i].mascot + '</a></li>';
}
$("#teams_list").append(html).listview("refresh");
} else {
$("#message").html('<p align="center">An error occurred while trying to retrieve teams list.</p>').addClass("errorm");
}
}
});
});
$(document).on("click", "a .team_link", function(event) {
alert("Link clicked"); // Not alerting
event.preventDefault();
localStorage.setItem("team_id", this.attr("id"));
console.log("Link clicked"); // Not logging
$.mobile.changePage(this.attr("href"));
});
</script>
</div>
<div data-role="page" id="games">
<div data-role="header" id="header" data-position="fixed"><h1>PA Football News</h1></div>
<div id="games_content" data-role="content"></div>
<div data-role="footer" id="footer" data-position="fixed">
<nav data-role="navbar">
<ul>
<li><a href="#index" data-transition="slide" data-icon="home">Home</a></li>
<li><a href="#info" data-transition="slide" data-icon="info">Info</a></li>
</ul>
</nav>
</div>
<script>
$(document).on("pageshow", "#games", function(event) {
console.log('This is the games page.');
var team_id = localStorage.getItem("team_id");
$.ajax({
url: "http://localhost/pafootballnews/mobile/games.php",
type: "post",
data: "team_id=" + team_id + "&api_key=version1pfn",
dataType: "json",
crossDomain: true,
error: function() {
$("#games_content").html("A server error occurred while trying to retireve team data.");
},
success: function(data) {
$("#games_content").html(data.result);
}
});
});
$("a .game_link").on("click", function (event) {
event.preventDefault();
localStorage.setItem("game_id", this.attr("id"));
$.mobile.changePage(this.attr("href"));
});
</script>
</div>
<div data-role="page" id="view_game">
<div data-role="header" id="header" data-position="fixed"><h1>PA Football News</h1></div>
<div id="view_game_content" data-role="content"></div>
<div data-role="footer" id="footer" data-position="fixed">
<nav data-role="navbar">
<ul>
<li><a href="#index" data-transition="slide" data-icon="home">Home</a></li>
<li><a href="#info" data-transition="slide" data-icon="info">Info</a></li>
</ul>
</nav>
</div>
<script>
$(document).on("pageshow", "#view_game", function(event) {
console.log('This is the game page.');
var game_id = localStorage.getItem("game_id");
$.ajax({
url: "http://pafootballnews.com/mobile/game.php",
type: "post",
data: "game_id=" + game_id + "&api_key=version1pfn",
dataType: "json",
crossDomain: true,
error: function() {
$("#view_game_content").html("A server error occurred while trying to retireve team data.");
},
success: function(data) {
$("#view_game_content").html(data.result);
}
});
});
</script>
</div>
<div data-role="page" id="info">
<div data-role="header" id="header" data-position="fixed"><h1>PA Football News</h1></div>
<div id="info_content" data-role="content">
<p>Thank you for downloading the Pennsylvania Football News mobile app. We are excited to be able to provide you with real-time score updates. Currently you are using version 1 of this app and as more people participate in keeping score for us we will expand our features. Please see below for information on how to use this app.</p>
<div data-role="collapsible">
<h3>How do I find scores for a team?</h3>
<p>The whole purpose of this app is to provide fans with real-time score updates. In order to do this go to the home page by clicking Home on the footer below. Scroll down until you find your team. Alternatively, you may type your team name in the search box and the list will be filtered accordingly. When you see the team that you want to view scores for, select it. You will then see a list of games for this team. Select the game that you want to view and you will be taken to the score for that game.</p>
</div>
</div>
<div data-role="footer" id="footer" data-position="fixed">
<nav data-role="navbar">
<ul>
<li><a href="#index" data-transition="slide" data-icon="home">Home</a></li>
<li><a href="#info" data-transition="slide" data-icon="info">Info</a></li>
</ul>
</nav>
</div>
<script>
$(document).on("pageshow", "#info", function(event) {
console.log('This is the info page.');
});
</script>
</div>
</body>
</html>
我忽略了它必须是一些简单而愚蠢的东西。任何人都可以看到我可能会出错的地方。