hide a div when clicking on the outer container using jQuery

Question

I have 2 divs, one overlayed on top of another. When I click on the outer div, I want to hide the inner div. When I click on the inner div nothing should happen to the inner Div. At the same time, the links in the inner div should work fine. How to do it using jquery?

<div class="outer">
    <div class="inner"></div>
</div>

.outer {
    background-color: #000;  
    position: fixed;
    top: 0;
    left: 0;
    z-index: 9998;
    height: 100%;
    width: 100%;
    opacity: 0.5;
}

.inner {
    background-color: blue;
    width: 240px;
    position: fixed;
    z-index: 9999;
    left: 50%;
    top: 50%;
    margin-left: -300px;
    margin-top: -150px;
}

jQuery code that doesn't work as expected:

$('.outer').click(function(e){
    $('.inner').hide();
});

$('.inner').click(function(e){
    return false;
});

If you're hiding the inner div all of it's children will be hidden too, and therefor not clickable. — Jay Blanchard, Dec 26 '12 at 19:44
Also see these posts - [Jquery click event propagation](http://stackoverflow.com/questions/2244320/jquery-click-event-propagation) / [Ignore mouse events on child elements](http://stackoverflow.com/questions/766286/how-do-i-ignore-mouse-events-on-child-elements-in-jquery) — nienn, Dec 26 '12 at 19:56

Sampson · Accepted Answer · 2012-12-26T20:49:56.863

5

This is almost always done by preventing bubbling. Since any click on .inner will bubble up to .outer, we need to prevent those clicks:

$(".outer")
    .on("click", function () {
        $(this).find(".inner").slideUp();
    })
    .on("click", ".inner", function (event) {
        event.stopPropagation();
    });

Fiddle: http://jsfiddle.net/22Uz7/
Fiddle (using your CSS): http://jsfiddle.net/22Uz7/1/

You indicated that you were using jQuery 1.4.2 in the comments below. As such, you won't have access to the .on method - the following code should work under 1.4.2:

$(".outer").bind("click", function () {
    $(this).find(".inner").slideUp();
});

$(".inner").bind("click", function (event) {
    event.stopPropagation();
});

Fiddle: http://jsfiddle.net/22Uz7/3/

edited Dec 26 '12 at 20:49

answered Dec 26 '12 at 19:46

Sampson

265,109
74
539
565

`event.stopPropagation();` - return false; in OP's code is already doing that. Both e.preventDefault and e.stopPropagation – Viktor S. Dec 26 '12 at 19:48
1

Hm... But because of e.preventDefault() caused by return false; links will not work. – Viktor S. Dec 26 '12 at 19:52
getting uncaught syntax error : Unexpected token illegal error while using the above code- is it because I'm using jquery 1.4.2. I tried bind, delegate too instead of 'on' – neelmeg Dec 26 '12 at 20:25
@web_dev Why are you using jQuery 1.4.2? That version is [nearly 3 years old](http://blog.jquery.com/2010/02/19/jquery-142-released/)... – Sampson Dec 26 '12 at 20:26
Thanks for the effort in giving a solution. Unfortunately jQuery 1.4.2 is what my client is using in many of its sites and not willing to upgrade it as of now. Finally got it working by the solution suggested at this link http://stackoverflow.com/questions/1403615/use-jquery-to-hide-a-div-when-the-user-clicks-outside-of-it – neelmeg Dec 26 '12 at 20:40
@web_dev I'm sorry to hear that you're stuck with 1.4.2. I'll update my answer with a version that will work with that version as well. – Sampson Dec 26 '12 at 20:43

score 1 · Answer 2 · answered Dec 26 '12 at 19:47

You can use the event.target to specify your action only if the target class name matches outer:

$('.outer').click(function(ev){
    var target = ev.target;
    if (target.className.match(/\bouter\b/)) {
        $(this).find('.inner').toggle();
    }
});

See demo

score 0 · Answer 3 · answered Dec 26 '12 at 19:44

0

do something like this?

$('.outer').click(function(){
   $('.inner').css('display', 'none');
});

or for it's child

$('.outer').click(function(){
   $(this).find('.inner').css('display', 'none');
});

answered Dec 26 '12 at 19:44

Chanckjh

2,587
2
22
28

hide a div when clicking on the outer container using jQuery

3 Answers3

See demo