Want to hide this div when click is outside, exclude any click inside it

Question

Possible Duplicate:
Detect click outside element?

Im trying to hide a div when focus (click) is outside it, but there are some elements in it and instead of doing the e.target.id on all these is there a way to include all elements? is it clear what i mean?

EDIT: im trying to hide the #contain_name when anybody click outside the newsletter

jsfiddle: demo

<div id="newsletter">
    <form action="#" class="form-post">
        <div class="clearfix">
            <input type="text" id="email" name="email" placeholder="email" />
            <button id="fake">Send</button>
        </div>
        <div id="contain_name" class="clearfix">
            <input type="text" id="person_name" placeholder="full name" />
            <button id="real_button">Send</button>
        </div>
    </form> 
</div> 


$('#email').focus(function() {
    $('#fake').fadeOut();
    $('#contain_name').slideDown();
});

$(document).on('click', function(){
    //do something here
});

@FrançoisWahl I think this post got some valuable answers for anybody trying to learn this, and is a bit different. — Dejan.S, Nov 24 '12 at 23:53
@Dejan.S: It is a duplicate question and the answers are near identical as well. One is using `$(...)[0]` check while the other uses `$(...).length`. It is the same difference, they both check that the jQuery selector matched something before executing the relevant code segment. Anything additional you learn in consequence on how jQuery works adds to the value of the answer but still makes the question a duplicate I'm afraid. — Nope, Nov 25 '12 at 00:32
@FrançoisWahl does not matter if it gets marked as duplicate, if anybody can learn from whats in it. i get your point tho. — Dejan.S, Nov 25 '12 at 00:35

score 2 · Answer 1 · answered Nov 24 '12 at 23:20

2

$(document).on('click', function(e){
    if (e.target !== $("#excludedDiv")[0]) {
      // do something there
    }
});

answered Nov 24 '12 at 23:20

armen.shimoon

6,303
24
32

+1, sorry i didn't notice who went first at first. – Dejan.S Nov 24 '12 at 23:33

Šime Vidas · Accepted Answer · 2012-11-24T23:31:22.997

0

This?

$( document ).on( 'click', function ( e ) {
    if ( !$( e.target ).closest( '#newsletter' )[0] ) {
        $( '#contain_name' ).hide();
    }
});

Live demo: http://jsfiddle.net/FUDLk/11/

edited Nov 24 '12 at 23:31

answered Nov 24 '12 at 23:21

Šime Vidas

182,163
62
281
385

wont work, http://jsfiddle.net/FUDLk/9/ – Dejan.S Nov 24 '12 at 23:25
@Dejan.S You forgot to define the argument `e`. Working demo: http://jsfiddle.net/FUDLk/11/ – Šime Vidas Nov 24 '12 at 23:29
oh, i did :), care to explain why you use the `array[0]` here and what it does? – Dejan.S Nov 24 '12 at 23:32
@ŠimeVidas: Your current example also hides the **fake** send button. Maybe adding `$('#fake').fadeIn();` will re-set it to the original state if clicked outside it. – Nope Nov 24 '12 at 23:32
@FrançoisWahl The "Send" button is only displayed if the user focuses the #email field. – Šime Vidas Nov 24 '12 at 23:34
I'm gone work out the details with show and hide later, its just that click outside bothering me – Dejan.S Nov 24 '12 at 23:34
@Dejan.S:If all you wanted to know is how to detect the click outside the element it seems to be a duplicate of `http://stackoverflow.com/questions/1160880/detect-click-outside-element` – Nope Nov 24 '12 at 23:35
1

@Dejan.S `$( e.target ).closest( '#newsletter' )` searches for the #newsletter element within the ancestor chain of the event target. If the user clicked within that element, than it will be found in the ancestor chain, and the jQuery object will select it. Otherwise, the jQuery object will contain no elements. Now, `[0]` returns the first element from the jQuery object, which is either the #newsletter element, or `null` if the jQuery object was empty. Finally, `!` negates that expression, since we want the if-branch to execute only if the jQuery object didn't contain any elements. – Šime Vidas Nov 24 '12 at 23:38
sort of, my situation was also all the element inside it too, which i see this also is. but the approach @ŠimeVidas provide is a bit different with the `array[0]` – Dejan.S Nov 24 '12 at 23:38
You could use `Array.length` instead – Alexander Nov 24 '12 at 23:39
@Alexander any specific reason to use the `Array.lenght` instead? and how to use that approach? `Array.length > 0`? – Dejan.S Nov 24 '12 at 23:41
@Alexander For me, it makes more sense grab the first element from the jQuery object and check if it's a DOM element, since that is what I'm trying to determine anyways. My method is more direct. – Šime Vidas Nov 24 '12 at 23:43
@Dejan.S He is referring to `if ( $( e.target ).closest( '#newsletter' ).length === 0 ) { ...` which behaves the same. – Šime Vidas Nov 24 '12 at 23:45
@ŠimeVidas thanks for explaining. learned something useful here. – Dejan.S Nov 24 '12 at 23:48

Want to hide this div when click is outside, exclude any click inside it

2 Answers2