How to detect a click outside an element, but that element got children

Question

I know this question might be repetitive as I have seen this solution: How do I detect a click outside an element?

I want to remove #main-element if I click outside the element, BUT, that element also has child elements inside. Meaning, if I click one of the child of #main-element, #main-element should not close

<div id="main-element">
    <div class="test">1</div>
    <div class="test">2</div>
    <div class="test">3</div>
    <div class="test">4</div>
</div>

I tried using this solution:

$('html').click(function(e){
    if(e.target.id !== 'main-element') {
       $("#main-element").removeClass("open").hide();
    }
});

// For the trigger
$("#click-show").click(function(){
    if($("#main-element").hasClass("open"))
    {
       $("#main-element").removeClass("open").hide();
    }
    else{
       $("#main-element").addClass("open").show();
    }
});

possible duplicate of Detect click outside element?

Ram
– Ram

2013-07-31 03:53:38 +00:00
Commented Jul 31, 2013 at 3:53 — Ram
– Ram, Commented Jul 31, 2013 at 3:53

Akhil Sekharan · Accepted Answer · 2013-07-31 03:47:39Z

1

This might help:

DEMO

Use closest to loop through parents and classes to show/hide your element;

$('html').on('click', function(){
  var mainElement = $('#main-element');
  if($(this).closest(mainElement).length){
      return;
  }
  mainElement.addClass('main-element-closed')
})

answered Jul 31, 2013 at 3:47

Akhil Sekharan

12.7k8 gold badges43 silver badges58 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Parrotmaster Over a year ago

That looks nothing at all like what he asked.

Sikander · Accepted Answer · 2013-08-01 11:01:53Z

0

$('*').click(function(){
if($(this).has('#main-element') || $(this).parent().has('#main-element')){
// it will open here
}else{
//put your hide code
}
});

answered Aug 1, 2013 at 11:01

Sikander

6561 gold badge8 silver badges22 bronze badges

Comments

lan.ta · Accepted Answer · 2014-02-17 10:35:38Z

0

try to refer to function of jquery is HasClass('your child element class') with jquery.click(document)

answered Feb 17, 2014 at 10:35

lan.ta

211 bronze badge

Collectives™ on Stack Overflow

How to detect a click outside an element, but that element got children

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related