jQuery + IE Blur Firing on Mouseout

Question

ok, so I have a popup search box that is shown when the user mouses over a hyperlink, when the user mouses out of the search box, the box disappears. this all works fine. When the textbox has focus, the search box is supposed to stay visible until the textbox loses focus, at which time the box will hide if the cursor is not over the box. this works well in All browsers except IE (IE7 to be specific). In IE, the blur event of the textbox is fired on mouseout of the textbox effectively hiding the search box. here is the code I have written:

<script type="text/javascript">
    $(document).ready(function() {
         //add mouseover event to the search button to show the search box
        $(".search").mouseover(
            function() {
                $(".open").show();
            });

        //add mouseout event to the search button to show the hide box
        $(".search").mouseout(
            function() {
                $(".open").hide();
            });

        //add mouseover event to the search box so it doesnt hide when the user attempts to click the box
        $(".open").mouseover(
            function() {
                $(".open").show();
            });

        //add mouseout event to the search box so it doesnt hides when the users mouse exits the box
        $(".open").mouseout(
            function() {
                $(".open").hide();
            });

        //don't ever hide the search box when the textbox has focus
        $("#tbSearch").focus(
            function() {
                $(".open").mouseout(
                    function() {
                        $(".open").show();
                    });
            });

        //hide the search box when the textbox loses focus
        $("#tbSearch").blur(
            function() {
                $(".open").hide();
                $(".open").mouseout(
                    function() {
                        $(".open").hide();
                    });
            });


    });
</script>

and here is the html

<a class="search" href="#"><span>Search</span></a>
<div class="open">
    <input id="tbSearch" type="text" />
    <a class="go" href="#"><span>Go</span></a>
</div>

Answer 1

The problem seems to be that you are rebinding events without unbinding them. So, there ends up being multiple events that fire showing and hiding the box depending on how many times the focus and blur event have happened. I am not exactly sure why it is failing in IE for some reason, but the solution seems to have too many moving parts so it is hard to tell exactly where it is failing.

I have been able to get this type of thing to work in the past by using an attribute that maintains the state of the textbox (focused or blurred). Try this out:

<script type="text/javascript">

$(function() {

var showBox = function() {
 $(".open").show();
};
var hideBox = function() {
 if (!$(".open").attr("searching")) {
  $(".open").hide();
 }
};

$(".search").hover(showBox, hideBox);
$(".open").hover(showBox, hideBox).hide();

    $("#tbSearch").focus(function() {
 $(".open").attr("searching", "true");
    }).blur(function() {
 $(".open").removeAttr("searching");
 $(".open").hide();
});
});

</script>

Answer 2

<script type="text/javascript">
    $(document).ready(function() {
         //add mouseover event to the search button to show the search box
        $(".search").bind('mouseenter mouseleave',function(){
                $(".open").toggle();
         });

        //add mouseover event to the search box so it doesnt hide when the user attempts to click the box
        $(".open").bind('mouseenter mouseleave',function(){
                $(".open").toggle();
        });

        //don't ever hide the search box when the textbox has focus
        $("#tbSearch").focus(function() {
                $(".open").show();
        });

        //hide the search box when the textbox loses focus
        $("#tbSearch").blur(
             $(".open").hide();
        });

    });
</script>