Выбор таблицы инвертирования JQuery

Question

У меня есть такая часть страницы

<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>

Я хочу назначить обработчик всему элементу #inbox div, который не является частью (дочерним элементом) таблицы.Я пытался сделать что-то вроде

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

Но это не работает, так как я могу инвертировать выбор таблицы внутри #inbox?

Answer 1

Поскольку обработчики кликов всплывают, вы можете сделать несколько вещей:

1. Только дети, а не таблица:

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

 // or

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

2. Одно событие:

 $("#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 2

попробуй ..

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

или

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

Answer 3

Итак, мой селектор: «все в #inbox, но не table или потомок любого table:

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