0
我正在嘗試在jQuery Mobile中編寫應用程序，並且希望在單擊鏈接時將項目存儲在本地存儲中，但由於某些原因點擊事件甚至無法觸發。我的頁面在下面。當我點擊索引頁面上的團隊鏈接時，我希望事件觸發。這應該將團隊ID存儲在本地存儲中，然後遊戲頁面將檢索它並顯示團隊的時間表。在jQuery Mobile 1.3.2中點擊事件不會觸發
<!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>
它必須是一些簡單而愚蠢的東西，我忽略了。任何人都可以看到我可能會出錯的地方。
您可能需要在ajax調用後將綁定代碼放入'pageshow'事件中。另外，你可以在裏面放入ajax調用。 – Omar