个人中心
gpt4 book ai didi

jquery - 另一个 html 页面中的事件在 Jquery Mobile 1.4 中不起作用

转载 作者：可可西里 更新时间：2023-11-01 13:33:26 27 4
gpt4 key购买 nike

我有两个名为 page1.html 和 page2.html 的 html 页面。在第一页我有一个按钮将加载第二页，第二页事件不起作用。我的代码如下

page1.html

<html>
    <head>
        <meta charset="utf-8" />
        <meta name="format-detection" content="telephone=no" />
        <!-- WARNING: for iOS 7, remove the width=device-width and height=device-height attributes. See https://issues.apache.org/jira/browse/CB-4323 -->
        <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" />
        <link rel="stylesheet" type="text/css" href="css/jquery.mobile-1.4.2.min.css" />
        <link rel="stylesheet" type="text/css" href="css/main.css" />
        <title>ShareQ</title>
        <script type="text/javascript" src="js/jquery-1.10.2.js"></script>
        <script type="text/javascript" src="cordova.js"></script>
    </head>
    <body>


 <div data-role="page" class="container" id="pageTwo">

                <div data-role="header" class="mainHeader" data-position="fixed" data-theme="b" data-tap-toggle="false">
                <span class="headerText">Scan QR</span>

                </div>

                <div data-role="main" class="ui-content" data-theme="a" align="center">
                  <div data-role="info" class="textContainer">
                 De QR code wordt herkend! <br>
                    <span class="subTexts">Er zijn al aangemeld <span style="color: #C7DA2B;">3</span> ShareQ <br>
                        gebruikers 
                    </span>
                  </div>
                  <a data-role="button" class="signUpbtn" align="center" id="signUpbtn" style="width:80%;" href="#pageWait" data-transition="slide">
                                    <span class="btnTxt">Meld je aan voor Queue</span>
                                    <img class="arrowClass" src="img/arrow.png" alt="" />
                    </a>

                  <a data-role="button" class="signUpbtn" align="center" id="msgBtn" style="width:80%;" href="chat.html" data-transition="slide">
                                    <span class="btnTxt">Verstuur bericht</span>
                                    <img class="arrowClass" src="img/arrow.png" alt="" />
                    </a>
                  <div>
                    <img alt="logo" class="bgLogo" src="img/logobg.png">
                  </div>

                </div>

                <div data-role="footer" class="mainFooter" data-position="fixed" data-tap-toggle="false" data-theme="b">
                    <div data-role="navbar">
                        <ul class="navIcons">

                            <li><a href="javascript:void(0);" data-iconpos="top" class="icon-homeactive ui-nodisc-icon" data-icon="homeactive" id="homeactivetwo">Home</a></li>
                            <li><a href="javascript:void(0);" data-iconpos="top" class="icon-setngIcn ui-nodisc-icon" data-icon="setngIcn" id="settingpgbtntwo">Instelligen</a></li>
                            <li><a href="javascript:void(0);" data-transition="slide" data-iconpos="top" class="icon-chatIcn ui-nodisc-icon" data-icon="chatIcn" id="chatpgbtntwo">Berichten</a></li>
                            <li><a href="javascript:void(0);" data-iconpos="top" class="icon-infoIcn ui-nodisc-icon" data-icon="infoIcn" id="infopgBtntwo">Informatie</a></li>

                        </ul>
                    </div><!-- /navbar -->
                </div>
            </div>
<script type="text/javascript" src="js/index.js"></script>
        <script type="text/javascript" src="js/home.js"></script>
        <script type="text/javascript" src="js/chat.js"></script>
        <script type="text/javascript" src="js/mobileinit.js"></script>
        <script type="text/javascript" src="js/jquery.mobile-1.4.2.min.js"></script>

    </body>
</html>

`page2.html

<html>
    <head>
        <meta charset="utf-8" />
        <meta name="format-detection" content="telephone=no" />
        <!-- WARNING: for iOS 7, remove the width=device-width and height=device-height attributes. See https://issues.apache.org/jira/browse/CB-4323 -->
        <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" />

    </head>
    <body>

<div data-role="page" class="container" id="chatPage">

    <div data-role="header" class="mainHeader" data-position="fixed" data-theme="b" data-tap-toggle="false">
    <span class="headerText">Send message</span>

    </div>

    <div data-role="main" class="ui-content" data-theme="a" align="center">

        <div class="textContainer">
            <span class="subTexts">Select a standard text</span>
            <input id="preTextmsg" type="text">
        </div>
        <div class="textContainer">

            <span class="subTexts">Set personal message together</span>
            <input id="enterText" type="text">
        </div>
        <a data-role="button" class="sendBtn" align="center" id="sendBtn">
            <span class="btnTxt">Send message</span>    
        </a>
        <div>
             <img alt="logo" class="bgLogo" src="img/logobg.png">
        </div>
    </div>

    <div data-role="footer" class="mainFooter" data-position="fixed" data-tap-toggle="false" data-theme="b">
        <div data-role="navbar">
            <ul class="navIcons">
                <li><a href="#" data-iconpos="top" class="icon-homeIcn ui-nodisc-icon" data-icon="homeIcn" id="homepgbtn">Home</a></li>
                <li><a href="#" data-iconpos="top" class="icon-setngIcn ui-nodisc-icon" data-icon="setngIcn" id="settingpgbtn">Instelligen</a></li>
                <li><a href="#" data-iconpos="top" class="icon-chatactive ui-nodisc-icon" data-icon="chatactive" id="chatpgbtn">Berichten</a></li>
                <li><a href="#" data-iconpos="top" class="icon-infoIcn ui-nodisc-icon" data-icon="infoIcn" id="regpgBtn">Informatie</a></li>
            </ul>
        </div><!-- /navbar -->
    </div>
</div>

      <!--      <script type="text/javascript" src="js/chat.js"></script> -->

 </body>
</html>

而 page1.html js 代码是，

$(document).on('pagecreate',function( event, ui ){
//$( "#homePage" ).on( "pagecreate", function( event, ui ) {
    $(this).unbind('pagecreate');
    hmPageLoad();

});

function hmPageLoad(){
    $("#homePage").on( "pagebeforeshow", function(evt){

    });
    $("#homePage").on( "pageshow",function(evt){
        document.addEventListener('deviceready', onReady, false);
        function onReady(){
            document.addEventListener("backbutton", function (e) {
                e.preventDefault();
            }, false );

            app.checkPlatform();
            app.checkConnection();

            $('#homepgbtn').on( "tap", function(evt){

                $.mobile.changePage('#homePage',{ transition: "slide"});

            });
            $('#settingpgbtn').on( "tap", function(evt){


            });
            $('#chatpgbtn').on( "tap", function(evt){


            });
            $('#infopgBtn').on( "tap", function(evt){

            });
}
});
}

和page2.html js是，

$("#chatPage").on( "pagebeforeshow", function(evt){

});
$("#chatPage").on( "pageshow",function(evt){
    $(this).unbind('pageshow');
    document.addEventListener('deviceready', function(){


    app.checkConnection();
    alert('test chat page');
    $('#chhomepgbtn').on( "tap", function(evt){

        $.mobile.changePage('index.html#homePage',{ transition: "slide"});

    });
    $('#chsettingpgbtn').on( "tap", function(evt){

        $.mobile.changePage('index.html#settngPage',{ transition: "slide"});    

    });
    $('#chchatpgbtn').on( "tap", function(evt){


        $.mobile.changePage('#chatPage',{ transition: "slide"});
    });
    $('#chregpgBtn').on( "tap", function(evt){
        alert('test info');


    });
   }, false);

});

当我按下具有 id = "msgBtn"的链接按钮时，它会加载 page2.html。但是现在，如果我按下 page2.html 中的任何链接按钮，它就不起作用。甚至没有警报消息。我不知道我是否遵循了正确的方法，因为我是 phonegap 和 jquery mobile 的新手。请引导我走正确的道路。

谢谢和问候，阿南德·泰戈尔

最佳答案

要了解这种情况，我们需要了解 jQuery Mobile 的工作原理。它使用 AJAX 将页面加载到 DOM。

第一页正常加载。它的 HEAD 和 BODY 被加载到 DOM 中。该内容将保留在那里(除非刷新页面)以等待进一步的内容加载。当加载第二个页面时，只有它的 BODY 内容被加载到 DOM 中，当我说它的 BODY 内容时，我指的是带有属性的 DIV data-role=”page”及其内部内容。

这听起来可能没什么问题，但您应该三思而后行。如果我们有几个 HTML 页面，并且每个页面都有一些独特的东西，假设不同的 JavaScript 仅在该页面执行期间使用，更不用说额外的 CSS 文件了。在这些文件的 HEAD 中找到的所有内容都将被丢弃，并且不会执行其 JavaScript。

不幸的是，您不会在他们的文档中找到这个描述。这是以太被认为是常识，或者只是忘记描述。

这个问题有几种解决方案，有好有坏，一切都应该取决于一个项目架构。

可以找到此问题的解决方案 here .

关于jquery - 另一个 html 页面中的事件在 Jquery Mobile 1.4 中不起作用，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/23752914/

27 4 0
文章推荐： html - 防止边距将元素推出容器
文章推荐： php - 在 PHP 中将指数转换为整数
文章推荐： php - 视频缩略图生成imagemagick？
文章推荐： php - 在 PHP 函数中哪里返回 false？
可可西里
个人简介

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

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