Jquery按钮单击事件不起作用

Posted 2023-05-09

【中文标题】Jquery按钮单击事件不起作用

【英文标题】：Jquery Button click event not working

【发布时间】：2018-09-18 18:42:14

【问题描述】：

我正在为我的 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 文件中有多个页面并使用内部页面链接。正如我所说，代码在浏览器中运行良好。混合版本没有触发以下代码： $(document).on('click', '#btnLogin', function(e) ....

您知道为什么它在科尔多瓦不起作用吗？我不知道我是否遗漏了什么。

【参考方案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-->

下面的脚本检查

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

【讨论】：

请添加这个脚本：-

我试过了，但没有快乐。

您好，阳光明媚，正如我在第一篇文章中指出的那样，它在服务器上运行良好。我正在尝试做两件事：1. 一个普通的浏览器网络应用程序 2. 带有 cordova 的混合应用程序（直接安装在移动设备上）。普通的网络应用程序运行良好。我在使用混合应用时遇到问题。