Change class using jQuery in Chrome and IE

I try to change a button class when i click it, from jQuery. I use .removeClass and .addClass but in Chrome and IE 9 my image is not displayed.

<script type="text/javascript">
    $(document).ready(
    function () {
        $('#myButton').click(
            function () {
             $('#myButton').removeClass('forgetPass').addClass('forgetPassoff');
      开发者_开发知识库  });
    });
</script>

.forgetPass
{
    background-image:url("http://login.mywai.de/DCILogin/Images/Send_Button.png");
    border: 0px;
    width: 89px;
    height: 21px;
}

.forgetPassoff
{
    background-image:url("http://login.mywai.de/DCILogin/Images/Send_Button_off.png");
    border: 0px;
    width: 89px;
    height: 21px;
}

<input type="submit" value="" class="forgetPass" id="myButton" />

I use jQuery 1.6.2.

This is what i get instead of images:

Thank you.

You need the click method to do the operation.

$('#myButton').click(function(){
  $(this).removeClass('forgetPass').addClass('forgetPassoff'); 
});

Further more...this remove/add class logic must be working. Maybe the problem lies in your CSS or somewhere else in the code.

Add lines below that pre-load the CSS background images...

<script type="text/javascript">
    $(document).ready(function () {  

        (new Image()).src = 'http://login.mywai.de/DCILogin/Images/Send_Button.png';
        (new Image()).src = 'http://login.mywai.de/DCILogin/Images/Send_Button_off.png';

        $('#myButton').click(function () {
             $('#myButton').removeClass('forgetPass').addClass('forgetPassoff');
        });
    });
</script>

Narnian solution solved my problem: "I'm wondering a few things... if you can use show() and hide() instead or if on page load, you had both classes already assigned and then you switched them immediately."

HTML Code

<input type="submit" value="" class="forgetPass" id="myButton" />
<input type="button" value="" class="forgetPassoff" id="myButtonOff" />

jQuery Code

 $(document).ready(
    function () {
        $('#myButton').click(
            function () {
                $('#myButton').hide();
                $('#myButtonOff').show();
            });
    });

CSS Code

.forgetPass
{
  background-image:url("http://login.mywai.de/DCILogin/Images/Send_Button.png");
  border: 0px;
  width: 89px;
  height: 21px;
  vertical-align:middle;
}
.forgetPassoff
{
  background-image:url("http://login.mywai.de/DCILogin/Images/Send_Button_off.png");
  border: 0px;
  width: 89px;
  height: 21px;
  vertical-align:middle;
}