Problem with jquery blur() event on Div element [duplicate]

This question already has an answer here:

How to blur the div element? 6 answers

I have problem hiding certain popup wich are based on divs. when i click out side those divs they dont hid. Here is the sample code what i m doing..

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>

    <script type="text/javascript" src="../JS/jquery-1.3.2.js"></script>
    <script type="text/javascript">
        $(document).ready(function()
        {
            $("#MainCanvas div").blur(function()
            {
                alert("blured");
            });
        });
    </script>

</head>
<body>
    <div id="MainCanvas" style="width: 400px; height: 350px; border: solid 1px black;">
       <div class="ui-widget-content" style=" vertical-align:middle; height:60px; border: solid 2px black; width:300px;">
            Drag me around
        </div>
    </div>

</body>
</html>

If I remember correctly, only A, AREA, BUTTON, INPUT, LABEL, SELECT, TEXTAREA create focus/blur events. If you want to hide the popup by clicking outside it, you have to for example listen to click events on document and check if the event occured inside or outside the popup.

Sample code:

$(document).click(function(e){
    if($(e.target).is('#MainCanvas, #MainCanvas *'))return;
    $('#MainCanvas').hide();
});

for div blur focusout() will work

 $('#divCustomerGroup').focusout(function () {
            alert('yo');
        });

You can add tabindex attribute on div tag:

<div class="my_div" tabindex="3"></div>

and after that blur event will be working:

$('.my_div').blur(function(){ 
   //code ... 
});

Hemant Shinde

I have done it by using the following code

<script>
    $(document).click(function (e) {
        if ($(e.target).is('._dpcontrol, ._dpcontrol *'))
            return;
        $('._dpcontrol').each(
                function (index, value) {
                    var retrivedtextbox = $(this).find('._dpitem')[0];
                    $(retrivedtextbox).fadeOut();
                });     
    });
</script>

The best idea would be to handle the mousedown event and check the element that invoked the event.

I borrowed a tip from multiple solutions to make something easy. Basically when I focus something I want it to appear, but if I click out of it, I want it to hide again. So, if I click on something INSIDE the div that appeared, my click then goes to see if it finds a parent called "DivHoldingcustomController". If so, do nothing. If it does not (because I clicked somewhere else, so whateve I clicked on does not have this parent), then hide the custom controller.

    $(document).on("click", function (event) {
        var groupSelectorArea = $(event.target).closest(".DivHoldingCustomController").length == 1;
        if (!groupSelectorArea)
            $(".SomethingIWantToHide").hide();
    });

You can use mouseleave method and solution

 <script type="text/javascript">
    $(document).ready(function()
    {
        $("#MainCanvas div").mouseleave(function()
        {
            alert("mouseleave");
        });
    });
</script>

jQuery has .focusin() and .focusout() methods for binding to blur and focus events on elements that don't fire a native javascript blur event. jQuery focusout

来源：https://stackoverflow.com/questions/1985292/problem-with-jquery-blur-event-on-div-element

标签

jquery

html

onblur