using 'focusout' to fade a popup

using 'focusout' to fade a popup

I have a (visibility:hidden) div with a drop down menu and a jQuery datepicker on it. This div is a popup that is displayed when the user clicks on an input field.

When the user clicks anywhere else on the page, the popup needs to dissappear. The code to hide the popup is like so:

    
    
     
  1.  
    jQuery('.datepicker-popup').live("focusout", function() {
    2. 
     
  2.     var id = jQuery(this).attr('id'); 
    3. 
     
  3.     id = id.substring(17); // datepicker-popup-#  
    4. 
     
  4.     jQuery('#datepicker-popup-'+id).fadeTo(500, 0.0, function() {
    5. 
     
  5.         jQuery('#datepicker-popup-'+id).css('visibility', 'hidden');
    6. 
     
  6.     });
    7. 
     
  7. });
    8.

Using jQuery 1.4

Now the problem is that the popup fades when the user clicks on the drop down menu above the datepicker or on the drop down menus from the datepicker itself (month/year) e.g. the code is being executed when the user uses (some) elements within the div, this obviously needs to be prevented somehow.

How do I do this the right way?