0

ボタンのonclickの色を変更したい次のHTMLコードがあります。使用$("#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（$(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イベントを使用できます。また、背景色を確認したい場合は、「returnfalse」を使用してください。それ以外の場合は、フォームを再度送信します。

于 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 に答える