Jquery/Javascript datepicker concept plugin

Question

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

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.

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

here is my code:

$(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);


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

I hope to get help from you guys, thanks

Answer 1

If you change your

searchIcon.click(function(){

to

searchIcon.mousedown(function(){

mousedown fires before focus is lost on the input. This will however still hide the icon after your mousedown runs. If you do not want the icon to disappear after it is clicked, have your mousedown set a flag, then have your blur check that flag. Something like this:

var iconClicked=false;

searchIcon.mousedown(function(){
   ...
   iconClicked=true;
}

$this.bind("blur",function(){
   if(iconClicked){
      iconCLicked=false;
   }else{
      searchIcon.hide();
   }
});

The only drawback is that this is on mousedown and not on click, but depending on what you're trying to do this may be acceptable.

EDIT: Found this, the first suggestion is an interesting one. jQuery Blur Fires Before href