Question

<tbody>
 <tr>
  <td><input type="checkbox"/></td>
  <td>453</td>
  <td>Nick  James</td>
  <td>12/9/2016</td>
 </tr>
</tbody>

JS

$('body').on('click','#myTable tbody',function(e){
    alert('do something');
});

我的表格行中有复选框，如何在上面的点击事件中委托它？当我点击复选框时，我不希望发生该事件。

Answer 1

您可以检查目标是否为复选框，并阻止进一步执行：

$(document).ready(function(){

    $('body').on('click','#myTable tbody',function(e){

        if($(e.target).is(':checkbox'))
        {
            return;
        }

        alert('do something');

    });
})

选中此Fiddle

Answer 2

仅在目标类型不是复选框时才执行此功能

＆＃13;

$(document).ready(function(){

$('body').on('click','#myTable tbody',function(e){
if(e.target.type!='checkbox')
    alert('do something');
});
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id='myTable'>
<tbody>
 <tr>
  <td><input type="checkbox"/></td>
  <td>453</td>
  <td>Nick  James</td>
  <td>12/9/2016</td>
 </tr>
</tbody>
</table>

＆＃13;

Answer 3

使用停止 event.stopPropagation() 可防止点击内部元素在父母身上冒泡。

$('body').on('click','#myTable tbody input[type="checkbox"]',function(event){
    event.stopPropagation();
});

$('body').on('click','#myTable tbody',function(e){
    alert('do something');
});

现在只有当您点击表格内的任何位置时，警报才会出现，而不是input[type="checkbox"]。

Answer 4

试试这个

您可以使用Jquery not和has选择器来实现此目标

$('body').on('click','#myTable tbody td:not("td:has(input[type=checkbox])")',function(event){
   alert('do something');
});

工作FIDDLE

委托表格行中的委托复选框

4 个答案: