jquery add and remove class problem

Question

I'm trying to bind a function with a non-existent class. I will try to explain

my js:

function hidelink()
{
        $('#user_form').hide();
        $('.selected').text("New User").removeClass('selected').addClass('unselected');
        return false;

}
function showlink()
{
        $('#user_form').show();
        $('.unselected').text("Hide it").removeClass('unselected').addClass('selected');    
        return false;

}
$(function(){
    $('#user_form').hide();
    $('.unselected').click(showlink);       
    $('.selected').click(hidelink);
}); 

my html:

<div id="user_form">
 <a href="/foobar" class="unselected">My Link</a> 
</div>

So basically, when you click in the link it will change the classes (selected/unselected) and hide/show a div. The problem is that, when i click once, it shows the form, but if i click again in the link, the form don't hides again. Maybe because i'm biding the events when the page loads and at this time there is not element that match the selector ".selected".. makes sense?

Answer 1

Maybe because i'm biding the events when the page loads and at this time there is not element that match the selector ".selected"..

Yes. Use live().