JQUERY - add CSS class to BUTTON element after click [closed]

Question

I want to change the background color of a button permanently after it is clicked. Using the following code the color only changes while the button is active/being clicked. Once the mouse button is released the added "clicked" class is no longer applied to the element.

Applying the following code to an INPUT tag instead of a BUTTON tag works the way I need it to. However, I'm using a BUTTON tag since I want the value to be different from the text inside the button.

What do I need to change?

-- Thanks.

 HTML
 <button class="inactive" value="test">Button</button>

 CSS
 .inactive {background-color:gray;}
 .clicked {background-color:orange;}

 JS
 $(document).ready(function(){
      $('button').click(function(){
           $(this).addClass('clicked');
      });
 );

This works fine in a fiddle. My guess would be that you have other CSS which you've not included which is interfering with this jQuery. — Rory McCrossan
– Rory McCrossan, Commented Jun 13, 2013 at 16:20
I found the problem. The button tag was inside a form element and was submitting and reloading the page upon being clicked. I didn't realize buttons submitted by default. Thanks for your help. — Roy H
– Roy H, Commented Jun 13, 2013 at 16:31

Smern · Accepted Answer · 2013-06-13 16:20:24Z

7

The only problem is that you are missing a curly brace: http://jsfiddle.net/AaKuf/

 $(document).ready(function(){
      $('button').click(function(){
           $(this).addClass('clicked');
      });
 }); //<==here

answered Jun 13, 2013 at 16:20

Smern

19.1k22 gold badges77 silver badges93 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

ayyp · Accepted Answer · 2013-06-13 16:19:24Z

1

$('button.inactive').click(function() {
    $(this).removeClass('inactive').addClass('clicked');
});

Should do the trick. This will clear the old class away from the button and give it the proper .clicked class. If the colour is resetting after using this solution, then the problem is elsewhere in your code.

answered Jun 13, 2013 at 16:19

ayyp

6,5984 gold badges35 silver badges47 bronze badges

Comments

Seiyria · Accepted Answer · 2013-06-13 16:22:34Z

0

$('button').mouseup(function() { 
    $(this).removeClass('clicked').addClass('inactive');
}

answered Jun 13, 2013 at 16:22

Seiyria

2,1323 gold badges25 silver badges52 bronze badges

Collectives™ on Stack Overflow

JQUERY - add CSS class to BUTTON element after click [closed]

3 Answers 3

Comments

Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Linked

Related