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>
