1

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?

rakibtg
  • 5,521
  • 11
  • 50
  • 73
  • 1
    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
  • 1
    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
  • 1
    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
  • Okay, now i understand. – rakibtg Aug 26 '15 at 18:02
  • 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

3 Answers3

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');
    }
});
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
2

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');
    });
});
DZanella
  • 243
  • 1
  • 8
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

Jacob Petersen
  • 1,463
  • 1
  • 9
  • 17