CODEWITHSUNDEEP
javascriptjqueryclickparent-child
Filippo oretti
Filippo oretti

Reputation: 49873

jQuery - click on parent is inherited from children

my situation is:

<div class="overlay">
<div class="modal"></div>
</div>

now i want that clicking overlay it hides both .overlay and .modal divs, so:

$('.overlay').on('click',function(){
$(this+',.modal').hide();
});

and it works, but there is a problem, if i click on .modal it does the same, and i don't want, i need to tell to jquery to hide the divs only if i click on .overlay and not if i click on .modal

How can i do? It seems the event attached to .overlay is inherited from childrens.

thanks in advice

Here JSFIDDLE

Upvotes: 1

Views: 3811

Answers (2)

Tats_innit
Tats_innit

Reputation: 34117

Try this Demo plz: http://jsfiddle.net/bcGZ3/3/

API:

All you want is to stop popogation of the click even to the child div and Jquery apis abpve will help you do achieve that. BTW your jsfiddle sample is empty.

Hope it fits the need, :)

Sample Code

$('.overlay').on('click',function(){
        $(this).hide();
     alert("Parent div click function called.");
});


$(".modal").click(function(e) {
    // click on this link will cause ONLY child alert to fire
    e.stopPropagation();
    // stop default action of link
    e.preventDefault();
    alert("Well-behaved child link click ONLY.\n\nAnd, Enjoy.");
});

Upvotes: 2

Bas Slagter
Bas Slagter

Reputation: 9929

Try this:

$('.overlay').on('click',function(evt){
    if(!$(evt.currentTarget).is('.modal')){
        $('.overlay, .modal').hide();
    }
});

Upvotes: 1

Related Questions