tags:

views:

69

answers:

2

I have 3 buttons. I'm trying to get it so that when one is clicked it gets a class of 'this-button' and the class is removed from others.

  <button id="button1">Button1</button>
  <button id="button2">Button2</button>
  <button id="button3">Button3</button>

So here's my simple event function:

$('button').live("click", function (){
    $(this).addClass("this-button").siblings().removeClass("this-button");
});

This does not work as expected.

Here's to try: check the classes in firebug. http://jsbin.com/orifo/edit

I'm really very confused. I think it's clear that $(this) refers to all the buttons, rather than just the one latest clicked. Why is this? Shouldn't it be the one latest clicked?

Can someone explain why this doesn't work.

Thanks.

A: 

This works on my end. I'm using IE 7 and jQuery 1.32.

David Andres
+1  A: 

Why is this? Shouldn't it be the one latest clicked?

Yes, it is the one clicked. Works fine for me. Here's the exact snippet I tested.

<style>
    .this-button { border: solid red 1px; }
</style>
<body>
<div>
    <button id="button1">Button1</button>
    <button id="button2">Button2</button>
    <button id="button3">Button3</button>
</div>
<script type="text/javascript" src="jquery-1.3.2.js"></script>
<script type="text/javascript">
    $('button').live('click', function() {
        $(this).addClass('this-button').siblings().removeClass('this-button');
    });
</script>
</body>
bobince