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

JavaScript and client side scripting.

Moderator: General Moderators

Post Reply
cohq82
Forum Commoner
Posts: 43
Joined: Mon Apr 21, 2008 8:38 pm

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

Post 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>
 
Last edited by Benjamin on Tue May 26, 2009 11:15 am, edited 2 times in total.
Reason: Changed code type from text to html.
User avatar
mikemike
Forum Contributor
Posts: 355
Joined: Sun May 24, 2009 5:37 pm
Location: Chester, UK

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

Post 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
Last edited by Benjamin on Tue May 26, 2009 11:14 am, edited 1 time in total.
Reason: Changed code type from text to javascript.
cohq82
Forum Commoner
Posts: 43
Joined: Mon Apr 21, 2008 8:38 pm

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

Post 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!?
cohq82
Forum Commoner
Posts: 43
Joined: Mon Apr 21, 2008 8:38 pm

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

Post by cohq82 »

Never mind. I figured it out
Post Reply