jQuery blur() not listening to $(this)

Question

Followed by the HTML DOM:

<div class="opt">
    Options
    <div class="panel">
        <h3>i am in panel!!</h3>
    </div>
</div>

When i click on the .opt it would show the .panel content, but then i need to trigger another event to hide the .panel when clicking outside of the .opt element.

jQuery:

$('.opt').click(function(){
    var $this = $(this);
    $this.find('.panel').fadeIn();
    $this.blur(function(){
        $this.find('.panel').fadeOut();
        alert('i am from blur');
    });
});

Here is a demo JsFiddle

But the blur() method is not executing, what i am doing wrong here technically?

Look at http://stackoverflow.com/questions/1985292/problem-with-jquery-blur-event-on-div-element. I tried your code with a tab index attribute and it works. — jnoreiga, Aug 26 '15 at 17:51
Look this: [http://stackoverflow.com/questions/1985292/problem-with-jquery-blur-event-on-div-element][1] [1]: http://stackoverflow.com/questions/1985292/problem-with-jquery-blur-event-on-div-element — DZanella, Aug 26 '15 at 17:52
I noticed that it works with `mouseleave` instead of blur but then, it doesnt listen for clicks — rakibtg, Aug 26 '15 at 17:55
Also, if you fire the event via jquery it responds fine. It also works fine in Internet explorer so might be a browser thing related to how is this event interpreted. The tab index trick seems to work tho. — Ernesto, Aug 26 '15 at 17:56
It's almost always wrong to define one event handler inside another event handler. Every time you click on `.opt` it will add another `blur` handler to it, so you'll get multiple alerts. — Barmar, Aug 26 '15 at 17:59
@Barmar Okay, got it. but i'm using chrome and there was no alert at all! — rakibtg, Aug 26 '15 at 18:00
I'm not sure it makes sense to use `blur` on a DIV. It's for input elements, that can receive and lose focus. — Barmar, Aug 26 '15 at 18:01
How about: http://stackoverflow.com/questions/152975/how-to-detect-a-click-outside-an-element which shows how to detect clicks outside an element. — Barmar, Aug 26 '15 at 18:03
@Barmar Yes. Though the tabindex things do the job but i think i'm gonna follow that. — rakibtg, Aug 26 '15 at 18:06

Renan Araújo · Answer 1 · 2015-12-07T17:25:22.967

5

You can try a click event on body instead of blur. Take a look at https://jsfiddle.net/y0wsfpvb/7/

$('.opt').click(function(){
    var $this = $(this);
    $this.find('.panel').fadeIn();
});


$('body').click(function (e){ 
    if( $(e.target).closest(".opt").length > 0 == false) {
        $('.panel').fadeOut();
        alert('fake blur');
    }
});

edited Dec 07 '15 at 17:25

answered Aug 26 '15 at 18:13

Renan Araújo

3,533
11
39
49

I dont understand what the if{..} to do when clicking on the body.. can please describe? – rakibtg Aug 26 '15 at 18:17
If the target is .opt, I don't want to close the panel, so I return false to exit the event. The click event is on body, but if the inner element is inside a .opt, I return false to exit the method to keep the panel opened. – Renan Araújo Aug 26 '15 at 18:26
Okay, i think it would be better instead of stopPropagation() on the .opt .. what do you think? – rakibtg Aug 26 '15 at 18:27
1

Yes. With stopPropagation() you will not be able to detect another possible events on bubbling. For example an event on a parent div will not work. – Renan Araújo Aug 26 '15 at 18:33

score 2 · Answer 2 · answered Aug 26 '15 at 17:55

This works if you define de tabindex property for the div... Try:

HTML

<div class="opt" tabindex="3">
    Options
    <div class="panel">
        <h3>i am in panel!!</h3>
    </div>
</div>

JS

$('.opt').click(function(){

    $(this).find('.panel').fadeIn();
    $(this).blur(function(){
        $(this).find('.panel').fadeOut();
        alert('i am from blur');
    });
});

score 1 · Answer 3 · answered Aug 26 '15 at 17:59

1

You could bind the fade out action to the body's on click handler, and then add:

event.stopPropagation();

to your opt class click handler to achieve this.

Here is an example on codepen

answered Aug 26 '15 at 17:59

Jacob Petersen

1,463
1
9
17

jQuery blur() not listening to $(this)

3 Answers3