Jquery/Javascript datepicker concept plugin
<p>I'm trying to imitate the function of the datepicker on how the focus, blur, and click works.
focus: when the cursor is at the text field the datebox appear
blur: when the cursor is not in the text field the datebox disappear
click: when the user clicks the datebox disappear and new value in textfield</p>

<p>I'm trying to create a similar concept:
focus: when cursor is at the text field, a div with an icon will appear
blur: icon will disappear
click: when the icon is clicked, a certain logic code will be executed.</p>

<p>PROBLEM:
WHEN I TRY TO CLICK THE ICON, THE BLUR EVENT IS FIRST BEING CALLED, SO THE CLICK EVENT NEVER FIRES,</p>

<p>here is my code:
<code>
<pre>

</p>




$(document).ready(function(){

    $(".test").searchHelp();
    $(".test2").searchHelp();
});



    (function($){
        $.fn.extend({
            searchHelp: function(options){


                return this.each(function(){
                    var $this = $(this);
                    var searchIcon = newSearchIcon();
                    var helpTable = newSearchHelpTable();
                    jQuery("body").prepend(searchIcon);
                    jQuery("body").prepend(helpTable);
                    var x = $this.position().left + $this.width();
                    var y = $this.position().top;

                    var once = false;
                    jQuery(searchIcon).css({position:'absolute',left:x,top:y});

                    $this.bind("focus",function(){
                        searchIcon.show();
                    });
                    $this.bind("blur",function(){
                        searchIcon.hide();
                    });
                    /*$(document).bind('mousedown',function(ev){
                        if(ev.target !=  searchIcon){
                            searchIcon.hide();
                        }
                    });*/
                    searchIcon.click(function(){
                        /*helpTable.show();
                        if(!once){
                            jQuery("tr",helpTable).dblclick(function(){
                                $this.val($(this).children("td._key").text());
                                helpTable.hide();
                                searchIcon.hide();
                            });
                            once = true;
                        }*/
                        alert("DO SOMETHING!");
                    });


                });
                function newSearchIcon(){
                    var icon = jQuery('');
                    icon.append("[@]");
                    icon.hide();
                    return icon;
                }
                function newSearchHelpTable(){
                    var helpSHTable = jQuery('');
                    helpSHTable.load("from.htm");
                    helpSHTable.hide();
                    return helpSHTable;
                }

            }
        });
    })(jQuery);


<p>
div.searchHelp table tbody tr:hover{
    background:orange;
}
div.searchHelp table tbody tr:active{
    background:red;
}
div.searchHelp table tbody tr td._key{
    background:green;
}



<br />
<br />
<br />


</pre></code></p>

<p>I hope to get help from you guys, thanks</p>
