How to select everything but object and children of object in jQuery (with event delegation)

Question

I have a web page, with an index that slides in from the side. What I want, is that when I click anywhere except the index object, the index should close. To solve this, I first need to be able to select all elements except for the index, but I'm having a hard time doing this, because I have to use event delegation (I have dynamically loaded DOM elements).

I understand this may have been asked before, but the solutions in the other answers do not work for me since I'm using event handling, and I don't have enough of an understanding of jQuery to figure out how tho implement their answers.

I tried this, but it hasn't worked out for me:

$(document).on('click','*:not(.index)',function(e) {
      alert("clicked")
      return false; 
});

The complete html code (minified) is this:

<html>

<div class="header" id="messenger">
  <div class="header-text">
    <span>Dodecahedron-n</span>
  </div>
</div>

<div class="topnav">
  <a href="#" class="link home-btn">Dodecahedron-n</a>
  <a href="http://pythonrepo.rf.gd/?i=1" class="link">Scripts</a>
  <a href="#" class="link index-btn">Index</a>
  <a href="#" class="link sort-btn">Sort: Newest</a>
  <a href="#" class="link menu-btn"><i class="fa fa-bars"></i></a>
</div>

<div class="no-click index">
  <div class="no-click index-heading">
    <span class="no-click vertical-center">Index</span>
  </div>
  <div class="no-click scroll-down-prompt">
    <span class="no-click vertical-center">Scroll Down <i class="fa fa-level-down"></i></span>
  </div>
  <div class="no-click wrapper">
    <div class="no-click index-content"></div>
  </div>
  <div class="no-click index-close-btn-container">
    <span class="no-click vertical-center"><a href="#" class="index-close-btn">Close <i class="fa fa-close"></i></a></span>
  </div>
</div>

<div class="index-tab">Index <i class="fa fa-caret-square-o-right" style="color: #F45C43"></i></div>

<div class="page"></div>

<div class="footer">
  <span class="main">Dodecahedron-n</span>
  <span class="side">Copyright <i class="fa fa-copyright"></i> Aarush.K 2019</span>
</div>

<script>
  $(function(){
    $(document).on('click','*:not(.index > *)',function(e) {
      alert("clicked")
      return false;
    });
  });

</script>

Can you use [Stack Snippets](https://meta.stackoverflow.com/q/358992/215552) to share the HTML and JavaScript please? — Heretic Monkey, Feb 21 '19 at 14:47
Your question states that you're trying to select *"everything but `.index`"*, but the title says *"children"*. Which is it? — Tyler Roper, Feb 21 '19 at 14:51

martincarlin87 · Answer 1 · 2019-02-21T14:48:20.590

0

$(document).on('click', '*', function(e) {
    if (!$(this).hasClass('index')) {
        alert("clicked")
        return false; 
    }
});

should work (but not tested)?

edited Feb 21 '19 at 14:48

answered Feb 21 '19 at 14:43

martincarlin87

10,848
24
98
145

I tried that too, it didn't work. Also, I'm trying to select everything EXCEPT ".index" and its children. – OunceOfShag Feb 21 '19 at 14:44
It should work. Can you expand the code of your example so that we can reproduce your issue and maybe help you better? Can you also provide the HTML Code where this should apply? – cloned Feb 21 '19 at 14:46
my entire code is kinda huge, so would it be ok if I gave a link to the website, and you could just inspect the code? – OunceOfShag Feb 21 '19 at 14:47

score 0 · Accepted Answer · answered Feb 21 '19 at 14:47

try

$(document).on('click',function(e) {
      var inIndex = $(e.target).closest('.index').length > 0;
      if (!inIndex){
         // close the index
      }
});

Your original code does not work because a child of .index would still be matched by '*:not(.index)' which targets all elements except .index itself only.

score 0 · Answer 3 · answered Feb 21 '19 at 14:48

You can also try something like this:

$(document).on('click','body:not(.index)',function(e) {
  alert("clicked");
  console.log(e.target);
  if (e.target.nodeName === 'div') {
    return false; 
  }
});

In e.target you should now have the element you clicked on. You can then test for classes, for IDs, or even the type of the node (div, a, span, ....)

In my example I return false when the targetNode is a div, but modify the "if" to do exactly what you want.

How to select everything but object and children of object in jQuery (with event delegation)

3 Answers3