个人中心
gpt4 book ai didi

jquery - jQuery Mobile 1.3.2 中的单击事件未触发

转载 作者：太空宇宙 更新时间：2023-11-04 14:40:02 25 4
gpt4 key购买 nike

我正在尝试在 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>

它必须是我忽略的简单而愚蠢的东西。谁能看出我可能哪里出错了。

最佳答案

这应该

  $(document).on("click", "a .team_link", function(event) {

  Or,

  $("a .game_link")

更改为:

  $(document).on("click", "a.team_link", function(event) {

  Or,

  $("a.game_link")

中间留有空白。

关于jquery - jQuery Mobile 1.3.2 中的单击事件未触发，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/18423796/

25 4 0
文章推荐： java - 将 devnagari 单词标记为字母
文章推荐： c++ - 这种分配内存的方式不好吗？
文章推荐： java - 将 JPanel 排列在 ScrollPane 顶部，而不是居中
文章推荐： c++ - 不同类型数组的不同行为
太空宇宙
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com