Question

我有以下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（）函数，但颜色不会改变。任何帮助将不胜感激。

Answer 1

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

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

FIDDLE

修改

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

在浏览器中打开控制台（F12）并检查是否有错误。

Answer 2

jQuery是否包含正确？因为它适用于我的jsFiddle。 http://jsfiddle.net/jnaHB/

提交请求时页面可能会刷新吗？

Answer 3

您正在使用提交按钮。这就是为什么点击提交按钮它可能会因表单提交而刷新页面。您可以使用表单onSubmit事件而不是按钮单击。如果你想看到背景颜色而不是使用“return false”，在你的功能中，否则它将再次提交表格。

Answer 4

首先，你还没有包含jquery ......

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

Answer 5

尝试document.ready中的代码

$（文件）。就绪（函数（）{ $（'＃submitButton'）。click（function（）{ $（“＃submitButton”）。css（“background-color”，“yellow”）; handleLogin（）; }）; }）

Answer 6

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

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

或

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

或

$(window).load(function() { /*Your function*/ })

点击按钮颜色不会改变

6 个答案: