JQuery code not working at a button click?

Question

I have 3 buttons inside div's tages as below.

<div id="make_larger">
<button type="button">Large</button> 
</div>
<div id="make_small">
<button type="button">Smaller</button> 
</div>
<div id="make_normal">
<button type="button">Normal</button> 
</div>

I want when i will click on "Large" button its color should be change to blue(using .selected class of css for it) .Jquery code is as below.

$('#make_larger').bind('click', function () {
        $('body').addClass('large');
        $('body').removeClass('normal');
        $('body').removeClass('smaller');
        $(this).addClass('selected');

     });

But it is not working.Color is not being change. Why?

Any help please.

http://i.stack.imgur.com/uqJeW.png is also a good explanation for what you need to start doing, OP :) — Jonas G. Drange, Aug 08 '12 at 08:28
Could you also post your css. I believe that you are adding class to div, try adding it to button inside div. — Ankur, Aug 08 '12 at 08:29

score 0 · Accepted Answer · answered Aug 08 '12 at 08:31

0

change last line to

$(this).children('button').addClass('selected');

answered Aug 08 '12 at 08:31

score 0 · Answer 2 · answered Aug 08 '12 at 08:32

0

HTML

<div id="make_larger">
    <button type="button">Large</button>
</div>
<div id="make_small">
    <button type="button">Smaller</button>
</div>
<div id="make_normal">
    <button type="button">Normal</button>
</div>
<style type="text/css">
    .selected{background:blue}
</style>

jQUERY

$('#make_larger').click(function() {
     $('#make_larger button').addClass('selected');
});

DEMO http://jsfiddle.net/mRwMt/10/

answered Aug 08 '12 at 08:32

TheBlackBenzKid

26,324
41
139
209

2

Or `$('button', this).addClass('selected');` – Ram Aug 08 '12 at 08:34

score 0 · Answer 3 · edited May 23 '17 at 12:06

0

you give the containing div the class selected, not the button. See this jsfiddle: http://jsfiddle.net/AFNJ9/.

ofcoure you can do something with css like: .selected button {background:blue;} which will make the background blue of the button.

In my opionion it's nice to use 'on': What's the difference between `on` and `live` or `bind`?

edited May 23 '17 at 12:06

Community

1
1

answered Aug 08 '12 at 08:32

Tim

9,351
1
32
48

JQuery code not working at a button click?

3 Answers3