Jquery Button单击事件不起作用

I am building a small Hybrid mobile app for my android device, I am using with jquerymobile, jquery, Ajax, PHP, MySQL, etc. I am new to hybrid apps. I have wrapped the app in cordova and installed on my device. The login button does seems to only refresh the page but doesn't fire the jquery event when clicked or touched. It doesn't even do the form validation. However, this works perfectly in a browser (I have uploaded same html file on a remote server).

我正在为我的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-->

I have multiple pages in one HTML file and using Internal page links. As I said, the code works fine in browsers. The Hybrid version is not firing the code in this: $(document).on('click', '#btnLogin', function(e){ .... }

我在一个HTML文件中有多个页面并使用内部页面链接。正如我所说，代码在浏览器中运行良好。 Hybrid版本没有触发代码：$（document）.on（'click'，'＃btnLogin'，function（e）{....}

Do you have any idea why it is not working in cordova? I don't know if I missing something.

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

1 个解决方案

#1

    <!--*************************************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-->

Below script check

    <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>