Question

I am trying to create a Jquery Tree plugin for my current project. In the plugin, there are 3 compomnents: a text box containing the result selected from the tree , a div containing the tree and a button to show the div. It works fine, except that i cannot make it auto lose the popup div if the tree lose its focus.

Here is the code to create the div

 createTree = function() {
        $.getJSON(_options.jsonSrc, function(data) {
            nDiv = document.createElement("div");
            nDiv.id = "divRootAd";
            $(nDiv).css('display', 'none');

            jsonObj = data["treeJson"];

            nUl = document.createElement("ul");
            nUl.appendChild(createNode(jsonObj));

            nDiv.appendChild(nUl);  

            $("body").append(nDiv);
            //$(nDiv).focus();

            repositionDiv();
        });
    };

repositionDiv = function() {
        if ($('#divRootAd').is(':hidden')) {
            // get the field position
            var sf_pos    = $("#txtAdVal").offset();
            var sf_top    = sf_pos.top;
            var sf_left   = sf_pos.left;        

            // get the field size
            var sf_height = $("#txtAdVal").height();

            // apply the css styles - optimized for Firefox
            $("#divRootAd").css("position","absolute");
            $("#divRootAd").css("left", sf_left);
            $("#divRootAd").css("top", sf_top + sf_height + 5);


            $('#divRootAd').show();

            $('#divRootAd').blur(function(event){
                alert("lose focus");

                clearDiv();
            });


        } else {
            clearDiv();
        }
    };

The line alert(“lose focus”) does not work when i move the mouse outside the div. Can anyone suggest a solution for this ?

Answer 1

Instead of blur you could use mouseout

$('#divRootAd').mouseout(function(event){
    alert("lose focus");
    clearDiv();
});

Hope it helps