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

尝试..

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

或

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

Answer 2

由于点击处理程序会冒泡，你可以做一些事情：

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 3

所以我的选择器是：“#inbox中的所有内容，而不是table或任何table的后代：

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

JQuery反转表选择

3 个答案: