salve nel codice ho questo evento


$(".servizioLibero").click(
function(){
//alert('ok');
if ($('.servizioLibero').css('color') != 'red')
{
$('.servizioLibero').css('color','red');
var t = $('#servizi').val();
var tserv = $('.servizioLibero').text();
tfinale = t + tserv;
$('#servizi').val(tfinale);
}
else
if ($('.servizioLibero').css('color') == 'red')
{
$('.servizioLibero').css('color','black');
var t = $('#servizi').val();
var tserv = $('.servizioLibero').text();
var tfinal = t.replace(tserv,'');
$('#servizi').val(tfinale);
}


//alert($('#servizi').attr('value'));
//alert($(".servizioLibero").text());
});

});


che devo chiamare quando clicco su un tag li

<ul id="elencoServizi">
<li class='servizioLibero'>testo[/list]

la prima volta che clicco sopra il tag li e questo è nero deve diventare rosso e aggiungere il testo ad un tag input

la seconda volta se il tag li è rosso tolgo il testo dal tag input e faccio nero il tag li

solo sembra nn funzionare sembra chiamare l'evento due volte nn capisco perchè