JQuery invert table selection

Question

I have page part like this

<div id="inbox">
   <h1>Headline</h1>
   <p>First paragraph</p>
   <table>
    <tbody>
      <tr>
        <td>table stuff</td>
      </tr>
    </tbody>
   </table>

   <p>Second paragraph</p>
</div>

I want to assign a handler to everything within the #inbox div that is not a part (a child) of the table. I tried to do something like

$('#inbox:not(:has(table))').click(function(){
  alert('hello inbox');
});

But that does not work, so how do I invert the selection of the table inside the #inbox ?

Answer 1

try..

$('#inbox table').siblings().click(function(){
  alert('hello inbox');
});

or

$('#inbox *').not('table *,table').click(function(){
  alert('hello inbox');
});

Answer 2

Since click handlers bubble up, you can do a few things:

1. Just the children, not the table:

 $("#inbox > *:not(:table)").click(function(e){ ... });

 // or

 $("#inbox").children(':not(table)').click(function(e){ ... }):

2. A single event:

 $("#inbox").click(function(e){
   // Not a descendant of table or this div
   if( $(e.target).closest('table').length === 0 && e.target !== this ){
     // Do something
   }
 });

Answer 3

So my selector is: "everything in #inbox, but not a table or a descendent of any table:

$('#inbox *:not(table,table *)').bind('click', function(){
    alert($(this).text())
});