Jquery Button单击事件不起作用

时间:2018-04-09 11:19:17

标签: jquery cordova jquery-mobile hybrid

我正在为我的Android设备构建一个小型混合移动应用程序,我正在使用jquerymobile,jquery,Ajax,PHP,MySQL等。我是混合应用程序的新手。我已将应用程序包装在cordova中并安装在我的设备上。登录按钮似乎只刷新页面,但在单击或触摸时不会触发jquery事件。它甚至没有进行表单验证。但是,这在浏览器中完美运行(我在远程服务器上上传了相同的html文件)。

<script>
     $(document).on('click', '#btnLogin', function(e)                        
    {   
        e.stopImmediatePropagation();
        e.preventDefault();                 


        FORM VALIDATION COMES HERE

        AJAX COMES HERE
        $.ajax(....);


    });

<!--*************************************HOME PAGE BELOW**********************************-->

    <div data-role="page" id="home"> <!-------------- Home page starts here ----------->

        <div data-role="header" data-position="fixed" class="ui_mobile">

            <h1>Grade-App 2018</h1>
        </div>


        <div role="main" class="ui-content">

            <h1>Welcome to Grade-App!</h1>

            <p> <b> Check Your Exam Results</b> </p>

            <p> Existing Users</p>
            <a href="#login_Page" id="login_link" class="ui-btn ui-btn-b ui-corner-all" data-transition="slide" data-ajax="false" data-prefetch="true" > Click to Sign-In</a>

        </div>


        <div data-role="footer" data-position="fixed" class="ui_mobile">
            <h1>© 2018 Grade-App | All Rights Reserved</h1>
        </div>
    </div> <!-------------- Home page ends here ----------->


    <!--*************************************login PAGE BELOW**********************************-->

    <div data-role="page" id="login_Page"> <!-------------- Login page  ----------->

         <div data-role="header" data-position="fixed" class="ui_mobile">
            <a href="#home" data-icon="home" data-ajax="false" data-transition="slide" data-direction="reverse" data-prefetch="true">Home</a>
            <h1>Grade-App 2018</h1>
        </div>



        <div id="login_div" data-role="content" class="ui-content" data-theme="e"> <!-- Login content Div-->


            <br><br>
            <p style="color:#CC191C;">Student and Admin Staff Login</p>
            <br><br>

            <hr> <!--<br><br>-->

            <form  method="post" action="" data-ajax="false" data-transition="pop" data-direction="reverse" id="login_form" >       


                <!--<p id="errorMsg" class="error" style="color:#ED0E11"> </p>--> <!--This is to display validation message-->  

                <div class="err" id="error"></div>

                <div data-role="fieldcontain">

                    <!--<label for="username" id="lblusername" name="lblusername"> User Name <span style="color:#ED0F13"> *</span>:</label>
                    <input type="text" id="username" name="username" placeholder="User Name" title="Please enter User Name" />-->

                    <input type="text" id="username" name="username" placeholder="User Name" title="Please enter User Name"  />

                </div>

                <div data-role="fieldcontain">

                    <!--<label for="password" id="lblPassword" name="lblPassword"> Password <span style="color:#ED0F13"> *</span>:</label>-->
                    <input type="password" id="password" name="password" placeholder="Password" title="Please enter Password" />

                </div>

                <div data-role="fieldcontain">

                    <label for="chck_rememberme">Remember me</label>
                    <input type="checkbox" name="chck_rememberme" id="chck_rememberme" checked="">                      

                </div>

                <hr>

                <div data-role="fieldcontain">

                <input type="submit" data-ajax="false" data-role="button" data-inline="false" value="Sign-In" id="btnLogin" name="btnLogin" role="button" class="ui-btn" data-icon="check" data-iconpos="top" data-theme="e" />


               <!-- <input type="submit" data-inline="true" value="Login" data-theme="b" class="ui-btn" role="button" />-->

               </div>

            </form>     

            <div data-role="footer" data-position="fixed" class="ui_mobile"><h1>© 2018 Grade-App | All Rights Reserved</h1></div>     

        </div> <!-- End of Login Content Div-->



     </div> <!-- End of Login page-->

我在一个HTML文件中有多个页面并使用内部页面链接。正如我所说,代码在浏览器中运行良好。 Hybrid版本没有触发此代码:$(document).on('click','#openLogin',function(e){....}

你知道为什么它不在cordova工作吗?我不知道我是否遗漏了什么。

1 个答案:

答案 0 :(得分:0)

    <!--*************************************HOME PAGE BELOW**********************************-->

        <div data-role="page" id="home"> <!-------------- Home page starts here ----------->

            <div data-role="header" data-position="fixed" class="ui_mobile">

                <h1>Grade-App 2018</h1>
            </div>


            <div role="main" class="ui-content">

                <h1>Welcome to Grade-App!</h1>

                <p> <b> Check Your Exam Results</b> </p>

                <p> Existing Users</p>
                <a href="#login_Page" id="login_link" class="ui-btn ui-btn-b ui-corner-all" data-transition="slide" data-ajax="false" data-prefetch="true" > Click to Sign-In</a>

            </div>


            <div data-role="footer" data-position="fixed" class="ui_mobile">
                <h1>© 2018 Grade-App | All Rights Reserved</h1>
            </div>
        </div> <!-------------- Home page ends here ----------->


        <!--*************************************login PAGE BELOW**********************************-->

        <div data-role="page" id="login_Page"> <!-------------- Login page  ----------->

             <div data-role="header" data-position="fixed" class="ui_mobile">
                <a href="#home" data-icon="home" data-ajax="false" data-transition="slide" data-direction="reverse" data-prefetch="true">Home</a>
                <h1>Grade-App 2018</h1>
            </div>



            <div id="login_div" data-role="content" class="ui-content" data-theme="e"> <!-- Login content Div-->


                <br><br>
                <p style="color:#CC191C;">Student and Admin Staff Login</p>
                <br><br>

                <hr> <!--<br><br>-->

                <form  method="post" action="" data-ajax="false" data-transition="pop" data-direction="reverse" id="login_form" >       


                    <!--<p id="errorMsg" class="error" style="color:#ED0E11"> </p>--> <!--This is to display validation message-->  

                    <div class="err" id="error"></div>

                    <div data-role="fieldcontain">

                        <!--<label for="username" id="lblusername" name="lblusername"> User Name <span style="color:#ED0F13"> *</span>:</label>
                        <input type="text" id="username" name="username" placeholder="User Name" title="Please enter User Name" />-->

                        <input type="text" id="username" name="username" placeholder="User Name" title="Please enter User Name"  />

                    </div>

                    <div data-role="fieldcontain">

                        <!--<label for="password" id="lblPassword" name="lblPassword"> Password <span style="color:#ED0F13"> *</span>:</label>-->
                        <input type="password" id="password" name="password" placeholder="Password" title="Please enter Password" />

                    </div>

                    <div data-role="fieldcontain">

                        <label for="chck_rememberme">Remember me</label>
                        <input type="checkbox" name="chck_rememberme" id="chck_rememberme" checked="">                      

                    </div>

                    <hr>

                    <div data-role="fieldcontain">

                    <input type="submit" data-ajax="false" data-role="button" data-inline="false" value="Sign-In" id="btnLogin" name="btnLogin" role="button" class="ui-btn" data-icon="check" data-iconpos="top" data-theme="e" />


                   <!-- <input type="submit" data-inline="true" value="Login" data-theme="b" class="ui-btn" role="button" />-->

                   </div>

                </form>     

                <div data-role="footer" data-position="fixed" class="ui_mobile"><h1>© 2018 Grade-App | All Rights Reserved</h1></div>     

            </div> <!-- End of Login Content Div-->

在脚本下面检查

    <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
    <script>
        $(document).ready(function() {
        $("#btnLogin").click(function(e){
            e.stopImmediatePropagation();
            e.preventDefault();                 
            alert('enter');
        });
        });

        </script>