swich off others element with the same selectors and switch on the clicked one in jquery

Question

I've a simple list of play button, such as

<a class="play" rel="video-1"></a> <a class="play" rel="video-2"></a>

and when I click to one of these I wish to switch off (remove class 'active') the others and switch on (add class 'active') the clicked one.

I've tried this but it doesn't work properly:

$('a.play').live('click', function() { 

    $('a.play').removeClass('active');

    $(this).toggleClass('active');          

}); 

I need ".live()" because buttons are loaded asyncrounously.

I wish to remove class "active" on other elements but clicked one, add class "active" on the clicked one and (this doesn't work properly) on the second click remove class ("active") on this.

Any help will be sincerly apreciated.

Thank you so much in advance.

Answer 1

Try this, it's removed class after second clicking on link as you want

$('a.play').live('click', function() { 


    $(this).toggleClass('active');  
    $('a.play').not(this).removeClass('active');        

}); 

Jsfiddle http://jsfiddle.net/TD7Yz/1/