0

我有以下 html 代码，我想更改按钮 onclick 的颜色。我使用$("#submitButton").css("background-color","yellow"); 但它不会在点击时改变。

这是我的html代码

<!DOCTYPE html>
<html>
<head>

<link rel="stylesheet" href="jquery.mobile/jquery.mobile-1.1.0.css" />
<link rel="stylesheet" href="docs/assets/css/jqm-docs.css" />
<link rel="stylesheet" href="docsdemos-style-override.css" />


<script type="text/javascript" charset="utf-8" src="cordova-1.9.0.js"></script>

<script type="text/javascript" src="jquery.mobile/jquery-1.7.2.min"></script>
<script type="text/javascript" charset="utf-8" src="js/main.js"></script>

<script type="text/javascript">

            $( document ).bind( "mobileinit", function()
            {
                console.log("$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$");
                $.mobile.pushStateEnabled = false;
                $.mobile.defaultTransition = 'slideup';
            });

        </script>

<script type="text/javascript" src="jquery.mobile/jquery.mobile-1.1.0.js"></script>

</head>
        <body>



        <div data-role="page">

        <div data-role="header">
        <h1>Form Page</h1>
        </div><!-- /header -->

            <div data-role="content">   
            <form id="loginForm">

        <!--    Wrap Inputs in fieldcontain which will sort out borders and padding, can cause layout to break  -->
        <div data-role="fieldcontain">
        <label for="firstName"> Username: </label>
        <input type="text" name="username" value="" id="username" /> <!--   Use id and name values -->
        </div>  

        <div data-role="fieldcontain">
        <label for="password"> Password: </label>
        <input type="password" name="password" value="" id="password" /> <!--   Use id and name values -->
        </div>  

        <div data-role="fieldcontain">
        <label for="dob"> Date of birth: </label>
        <input type="password" name="dob" value="" id="dob" /> <!-- Use id and name values -->
        </div> 


        <div data-role="button">
        <input type="submit" data-role="button" value="Login" id="submitButton">
        </div>

        </form> 
        </div>

        <div data-role="footer">
        <h4>Footer content</h4>
        </div><!-- /footer -->

        </div>  



        <script type="text/javascript">

            $(function()
            {
                $('#submitButton').on('click', function(e)
                {
                    e.preventDefault();
                    $(this).css("background-color","yellow");
                    handleLogin();
                });
            });


        </script>   



        </body>
</html>

单击提交按钮时，它会调用 handleLogin() 函数，但颜色不会改变。任何帮助将不胜感激。

4

6 回答 6

1 
$(function() {
    $('#submitButton').on('click', function(e) {
        e.preventDefault();
        $(this).css("background-color","yellow");
        handleLogin();
    });
});

防止表单刷新页面，将代码放在 document.ready (the $(function() {..code here..});) 中，并记住包含 jQuery。

小提琴

编辑：

如果发布的新代码是您的整个文件，那么您没有 handleLogin 函数（除非它在外部文件中）？？？

在浏览器中打开控制台 (F12) 并检查是否有任何错误。

于 2012-07-10T04:52:17.363 回答
1

是否正确包含 jQuery？因为它在我的 jsFiddle 中对我有用。http://jsfiddle.net/jnaHB/

提交请求时页面可能正在刷新？

于 2012-07-10T04:52:19.083 回答
0

你$('#submitButton').click(function()应该在里面：

$(function() {
  /*Your function*/
})

或者

$(document).ready(function() {
/*Your function*/
})

或者

$(window).load(function() {
/*Your function*/
})
于 2012-07-10T05:08:58.340 回答
0

您正在使用提交按钮。这就是为什么单击提交按钮可能会由于表单提交而刷新页面的原因。您可以使用表单 onSubmit 事件而不是单击按钮。而且，如果您想查看背景颜色，请使用“return false;”。在您的函数中，否则它将再次提交表单。

于 2012-07-10T04:51:02.753 回答
0

首先，你没有包括 jquery ......

其次，您可以添加return false;事件回调，否则页面将刷新并且您将看不到任何内容。

于 2012-07-10T04:54:40.560 回答
0

尝试 document.ready 中的代码

$(document).ready(function(){ $('#submitButton').click(function () { $("#submitButton").css("background-color", "yellow"); handleLogin(); }); })
于 2012-07-10T04:59:04.660 回答