點擊按鈕顏色沒有改變

我有以下的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（）函數，但顏色不改變的點擊。任何幫助將不勝感激。

來源

2012-07-10 PPD

是否包含jQuery UI的？.. – maxhud 2012-07-10 04:49:05

我想這是因爲你的形式做了'後back'。如果您正在處理來自JS的登錄，請在按鈕點擊代碼的末尾包含一個'return false;'行。 – 2012-07-10 04:50:27

我已經整理好了你的代碼，但是我沒有在html中看到jQuery的任何鏈接。 – 2012-07-10 04:53:18

您正在使用提交按鈕。這就是爲什麼點擊提交按鈕它可能會刷新頁面由於表單提交。您可以使用表單onSubmit事件而不是按鈕單擊。而且如果你想看到背景顏色比使用「return false;」在你的函數中，否則它會再次提交表單。

來源

2012-07-10 04:51:02

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

防止從刷新頁面的形式，把你的代碼中的document.ready（在$(function() {..code here..});），並且要記住，jQuery的。

FIDDLE

編輯：

如果發佈新的代碼是你的整個文件，你沒有handleLogin功能（除非它是在一個外部文件）???

在瀏覽器（F12）中打開控制檯並檢查是否有任何錯誤。

來源

2012-07-10 04:52:17 adeneo

handleLogin功能是在不同的文件中，沒有包括在同一個HTML文件。 – PPD 2012-07-10 05:09:56

由於您使用jQmobile，刪除ready.function並確保提交按鈕is'nt複製，當幾頁中與阿賈克斯的DOM加載可能發生，和指定的ID將不再工作，這是一個常見的JQM問題。 – adeneo 2012-07-10 05:16:38

@ adeneo嘗試了很多東西后，只有$（document）.ready（）的作品。請在我原來的問題上再次改變一些事情。這是我的完整的HTML文件。 – PPD 2012-07-10 05:24:03

是否正確包含了jQuery？因爲它在我的jsFiddle中適合我。 http://jsfiddle.net/jnaHB/

也許當提交請求時頁面刷新？

來源

2012-07-10 04:52:19 Ivan

假設'jQuery'被包含在內是安全的，因爲OP已經聲明瞭handleLogin（）函數被正確調用。 – 2012-07-10 04:55:12

@jSang：這是真的！這並沒有發生在我身上。 – Ivan 2012-07-10 04:55:53

我喜歡你接近問題並在jsfiddle上顯示它的方式 – Rab 2012-07-10 04:55:58

首先，你還沒有包括jQuery的...

其次，你可以在你的事件回調添加return false;，否則頁面會刷新，你將看不到任何東西。

來源

2012-07-10 04:54:40 demix

嘗試的document.ready

$代碼（文件）。就緒（函數（）{ $（ '＃提交按鈕'）。點擊（函數（）{ $（「＃提交按鈕」）的CSS（「背景色」，「黃色」）; handleLogin（）; }）;} ）

來源

2012-07-10 04:59:04 aneeshraj

你$('#submitButton').click(function()應該內：

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

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

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

來源

2012-07-10 05:08:58

我不能使用第二個選項。我嘗試了第一次和第三次，但仍然沒有改變顏色。 – PPD 2012-07-10 05:30:24

在哪個瀏覽器中查看您的頁面以此代碼？ – 2012-07-10 05:37:34

點擊按鈕顏色沒有改變

回答

相關問題