CODEWITHSUNDEEP
jquery
shrikanth
shrikanth

Reputation: 179

Lost focus event in Jquery

Please refer this http://jsfiddle.net/shrikanth/V7uc7/

My requirement is that whenever user moves out of div# aaa, system should hide the same div element, which is happening.

However I have come across following issue.

Within a div element when user switch over between the text box is also triggering hide event.How to fix this issue.

Basically user steps out of div element , system should hide that div element .Also user should be allowed to switch over between the text box within that div element

<div id="aaa">
    <input type="textbox" name="a"/>
    <input type="textbox" name="b"/>
    <input type="textbox" name="c"/>
</div>

Jquery 

$(document).ready(
    function(){
        $("#aaa").focusout(function () {
            $(this).hide();
    });
});

CSS

#aaa{
    background-color:black;
    position:absolute;
    width:172px;
    height:133px;
    padding:32px;
}

Upvotes: 1

Views: 4240

Answers (2)

Felix
Felix

Reputation: 38112

You can use e.stopPropagation() to prevent focusout event bubble up from your input to the parent div which will result in hiding your parent div:

$("#aaa input").focusout(function (e) {
    e.stopPropagation();
});

Updated Fiddle

Based on your comment, you can use:

$(document).click(function (e) {
    if(!$(e.target).is('#aaa')) {
        $('#aaa').hide();
    }
});

$("#aaa input").click(function (e) {
    e.stopPropagation();
});

Updated Fiddle

Upvotes: 1

Arun P Johny
Arun P Johny

Reputation: 388436

Try

$(document).ready(function () {
    var timer;
    $("#aaa input").blur(function () {
        timer = setTimeout(function () {
            $("#aaa").hide()
        }, 50);
    }).focus(function(){
        clearTimeout(timer)
    });
});

Demo: Fiddle

Upvotes: 1

Related Questions