.Blur( ) event seems to be overriding click event

JavaScript
1

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:

			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');
				});

Here is my HTML:

<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>