Set a flag on mousedown on the DIV to prevent blur (mousedown fires
first):
$().ready(function(){
var divclick = false;
$('#aa')
.focus(function() {
$('#bb').show();
})
.blur(function() {
if ( divclick ) return( divclick = false );
$('#bb').hide();
});
$('#bb')
.click(function() {
alert('test');
$('#aa').focus();
})
.mousedown(function(){
divclick = true;
});
});
On May 25, 2:01 am, cohq82 <quang...@gmail.com> wrote:
> 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>
