Page 1 of 1

Click event not fired when hide() called by blur()

Posted: Mon May 25, 2009 12:00 am
by cohq82
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

Code: Select all

<!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>
 

Re: Click event not fired when hide() called by blur()

Posted: Mon May 25, 2009 12:20 am
by mikemike
Hi,

Your alert won't be shown because you're hiding the div that calls the alert the second focus is removed from the textarea so what you're asking is actually impossible.

If you want to be able to keep the div there even when the textarea loses focus just remove the jQuery that hides it...

Code: Select all

 
 $('#aa').blur(function() {
   $('#bb').hide();
 });
 
Mike

Re: Click event not fired when hide() called by blur()

Posted: Mon May 25, 2009 4:39 am
by cohq82
Yes, I understand that logic because it is basically my question: How to enable click event on an element which is showed ONLY if another element is focused!?

Re: Click event not fired when hide() called by blur()

Posted: Mon May 25, 2009 12:29 pm
by cohq82
Never mind. I figured it out