[Resolvido] Executar procedimento só após a conclusão da anterior

Fala galera,

Estou tentando criar um "select" personalizado, baseado em uma <ul>, mas estou tendo alguns probleminhas na hora de fechar a lista quando se clica fora dela, acompanhem meu código:

HTML:

<div class="jSelect" id="TxtText">
<p>Select a item</p>
<span>ν</span>

<ul>
	<li id="Option 01">Option 01</li>
	<li id="Option 02">Option 02</li>
	<li id="Option 03">Option 03</li>
	<li id="Option 04">Option 04</li>
</ul>
</div>

CSS:

.jSelect { background:#FFF; font:13px 'Arial'; width:250px; height:25px; border:solid 1px #CCC; float:left; position:relative; z-index:95; }
.jSelect p { width:215px; height:17px; padding:4px 5px; margin:0; float:left; }
.jSelect span { color:#C00; font-size:15px; text-align:center; width:25px; height:19px; padding:3px 0; cursor:pointer; float:right; }

.jSelect ul { background:#FFF; border:solid 1px #CCC; border-top:none; width:213px; height:auto; list-style:none; padding:0 5px; margin:0; display:none; float:left; position:absolute; top:27px; }
.jSelect ul li { width:100%; height:auto; padding:3px 0; cursor:pointer; }

Javascript:

$('.jSelect span').click(function(){
$('.jSelect ul').slideDown('slow');

$(document).one('click', function(e){
	alert(e.target);

// if(!$(e.target).closest('.jSelect').length){ // $('.jSelect ul').slideUp('fast'); // }

});
});

 

 

O problema é que, na minha visão, ele só deveria captar o clique e seu target após o clique no .Select span, logo, você clica no span, e a partir dai ele espera o próximo clique para verificar o target, só que não é bem isso que está acontecendo! Assim que clica no span (seta do select) ele já pega o target e acaba invalidando a função.

Como eu faço para que ele realmente capte apenas o clique que ocorre APÓS se clicar no '.jSelect span'?