Jquery .Click applies to all sub divs?

Question

HTML:

<div id="lowerLayer">
    <div id="positionLayer">
        <div id="imageLayer">
            <div id="imageHolder" style="background-image: url('/Images/Loading/ajax-loader.gif');">

            </div>
        </div>
    </div>
</div>

CSS:

#lowerLayer
{
    position: fixed;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    width: 100%;
    height: 100%;
    background-color: Green;
    cursor: help;
}
#positionLayer
{
    position: relative;
    margin-top: 80px;
    width: 100%;
    background-color: Red;
}
#imageLayer
{
    position: relative;
    width: 450px;
    height: 400px;
    margin: auto;
    background-color: Blue;
    background-image: url('../Images/Large-image-holder.png');
}
#imageHolder
{
    position: absolute;
    left: 25px;
    top: 25px;
    width: 400px;
    height: 300px;
    line-height: 300px;
    background-position: center;
    background-repeat: no-repeat;
    background-color: Aqua;
}

JQuery:

$(document).ready(function() {
        $("#lowerLayer").click(function() {
            $(this).fadeTo("fast", 0, function() {
                $(this).hide(0);
            });
        });
    });
});

Edit:

the problem im having us that the click event seems to be applied to all sub divs i just want it to apply to "#lowerLayer"

Answer 1

Leaving event delegation and bubbling aside, since I don't think it is relevant to the actual problem here.

The jQuery hide() method applies display: none to the styles for an element. If an element is not displayed, then none of its descendants are either. Likewise, fadeTo() reduces the opacity, which also has an effect on the descendents of an element.

Answer 2

I think this will solve your problem:

$(document).ready(function() {
        $("#lowerLayer").click(function(e) {

            // Return if it's a child that's clicked:
            if (e.target !== this) {return;}

            // Otherwise continue:
            $(this).fadeTo("fast", 0, function() {
                $(this).hide(0);
            });

        });
    });
});