How can I get .blur( ) working in this situation?

How can I get .blur( ) working in this situation?

I am having an issue with the .blur() event. I have a search box that, when clicked, will call a .focus() event that changes the background color and adds a "clear" icon. When the clear icon is clicked the text in the search box should be cleared out. When the user clicks back off the search box, the background color should return to normal and the clear icon should disappear.

The focus and click events are working okay, but when I add the blur event it throws everything off. The blur event seems to be overriding the click event functionality. How can I get this working?

Here is my jQuery:

  1. <script type="text/javascript">
    var input = $("#searchHeader");
    var button = $("#searchClose");
    var bkgd = $('#searchBkgd');

    input

    .focus(function() {
      bkgd
    .addClass('searchBkgdColor');
      button
    .css('display','inline');
      button
    .click(function() {
        input
    .attr('value','').focus();
      
    });
    });

    input

    .blur(function() {
      bkgd
    .removeClass('searchBkgdColor');
      button
    .css('display','none');
    });
    </script>
And my HTML:

  1. <div id="searchBkgd">
      
    <form id="searchNav" name="searchHeading" class="clear" method="get" action="/search/searchText" autocomplete="off">
        
    <!--#include virtual="/_assets/inc/searchLangSetting.html" --> 
        
    <input type="hidden" name="site" value="us">
        
    <input type="image" style="cursor:pointer;" src="/_globalAssets/img/nav/search.gif"/>
        
    <input type="text" class="text" value="Search" required="true" name="query" id="searchHeader" />
        
    <div id="searchClose"></div>
      
    </form>
    </div>
Thanks!