[jQuery] Click event not fired when hide() called by blur()

[jQuery] Click event not fired when hide() called by blur()


Hi all,
I am running into this specific use case and could not figure out how
to do this. To simplify, I have a textarea and a DIV as code below.
The way it supposes to work is when I focus on the textarea by
clicking it, the DIV will show. Otherwise, it will be hidden. Then
when I click the DIV, there will be an alert(). However, right now if
I click on the DIV, it will trigger the blur() event first which calls
to hide() the DIV. After that, the click event is not called at all. I
need to be able to click on the DIV and the DIV is not hide() at all
and show alert(). Any help? Thanks
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://
www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/
jquery.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#aa').focus(function() {
$('#bb').show();
});
$('#aa').blur(function() {
$('#bb').hide();
});
$('#bb').click(function() {
alert('test');
});
});
</script>
</head>
<body>
<textarea id="aa">This will always show</textarea>
<div id="bb" style="display:none;">Hidden by defaul and alert 'test'
when clicked</div>
</body>
</html>