Question

I’m working on an existing custom control for an existing website that has to run successfully in IE6 and I need to extend the control to hide part of it once it has lost the focus. Everything is currently working if you click off the control onto just the web page, but it is not hiding if I select another control of the same type. This is the javascript I have currently, the section that isn’t working is the .blur(function()):

$(document).ready(function(e) {
                    $('" + checkListDivId + @"').hide();
                    $(document).click(function(e) {
                        if (($('" + checkListDivId + @"').is(':visible'))) {
                            $('" + checkListDivId + @"').hide();
                        }
                    });

                    $('" + checkListDivId + @"').click(function(e) {
                        e.stopPropagation();
                    });

                    $('" + checkListDivId + @"').blur(function() {
                        if (($('" + checkListDivId + @"').is(':visible'))) {
                           $('" + checkListDivId + @"').hide()
                        }
                    });

                    $('" + textBoxDivId + @"').click(function() {
                        if (!($('" + checkListDivId + @"').is(':visible'))) {
                            $('" + checkListDivId + @"').show();
                        }
                        else {
                            $('" + checkListDivId + @"').hide();
                        }
                        return false;
                    });

Answer 1

Try:

$('" + checkListDivId + @"').bind('focusout', function(){
    if (($('" + checkListDivId + @"').is(':visible'))) {
        $('" + checkListDivId + @"').hide()
    }
});