Problem with jquery blur() event on Div element

Question

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>

Rafael · Answer 1 · 2009-12-31T13:05:46.983

25

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

edited Dec 31 '09 at 13:05

answered Dec 31 '09 at 12:58

Rafael

18,349
5
58
67

3

Or you could use mouseout if you don't want your users to have to click. If they're going to have to click somewhere, you might as well have a close button on the dialog and have them click that. – tvanfosson Dec 31 '09 at 13:00
Thanks rafael.. I got the point.. – Jehanzeb afridi Jan 01 '10 at 06:20
@Jehanzebafridi don't forget to check the answer you accept as accepted (the icon under the number left of the answer) – Moak Mar 04 '13 at 10:21
Whilst this works, for a more comprehensive solution, particularly if your popup layer contains a number of nested elements, all of which might get the click event, check this answer: http://stackoverflow.com/a/4629849/1371408 – Matty J Aug 15 '14 at 02:24

score 6 · Answer 2 · answered Oct 06 '15 at 13:22

6

for div blur focusout() will work

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

answered Oct 06 '15 at 13:22

Jaydeep Shil

1,894
22
21

1

to the top! Simple and elegant. – Tilak Raj Jun 18 '16 at 17:22

score 4 · Answer 3 · answered Mar 06 '13 at 18:21

4

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

answered Mar 06 '13 at 18:21

Viktor Oleksyn

624
7
6

score 1 · Answer 4 · edited Jun 25 '12 at 12:19

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>

score 0 · Answer 5 · answered Dec 31 '09 at 13:01

0

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

answered Dec 31 '09 at 13:01

rahul

184,426
49
232
263

score 0 · Answer 6 · answered Apr 30 '14 at 16:42

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

score 0 · Answer 7 · answered Oct 15 '14 at 21:00

0

You can use mouseleave method and solution

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

answered Oct 15 '14 at 21:00

Yuseferi

7,931
11
67
103

score 0 · Answer 8 · answered Nov 11 '14 at 10:16

0

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

answered Nov 11 '14 at 10:16

Matt Fellows

6,512
4
35
57

Problem with jquery blur() event on Div element

8 Answers8

Linked