在表格行内有一个输入复选框，我可以将点击事件添加到行并且仍然能够点击输入

Question

我有一张桌子：

<table>
  <tr>
    <td>Something</td>
    <td>Something Else</td>
    <td><input type='checkbox' value='clickme' id='yes'></td>
  </tr>

对于用户来说，如果他们点击行，他们会获得更多关于行的数据，如果他们点击复选框，他们会看到一些其他选项。我如何在 jquery 中监听每个事件。我的问题是单击复选框显然会触发行单击事件

$('tr').click(function(){
     alert('you clicked the row');
});
$('#yes').change(function(){
      alert('you clicked the checkbox');
});

如果元素是动态创建的，这是否可行：

        $('#someTableId').on('click','#yes',function(e){
            alert($(this).attr('id'));
            e.stopPropagation();
    });

更新：第 2 部分的答案是。

Answer 1

你可以用event.stopPropagation()试试这个：-

$('#yes').click(function(e){
 e.stopPropagation();
});

Demo

Answer 2

使用event.stopPropagation来阻止事件冒泡，你需要为复选框绑定新的点击事件。

防止事件在 DOM 树中冒泡，防止任何 父处理程序不会收到事件通知。

Live Demo

$('#yes').click(function(event){         
      event.stopPropagation();
});

另一种选择是为checkbox 添加附加点击处理程序是在事件源为checkbox 时跳过tr 点击处理程序的处理。

Live Demo

$('tr').click(function(event){
    if(event.target.id === 'yes') return;
     alert('you clicked the row');        
});

Answer 3

使用 event.stopPropagation();

定义

防止事件在 DOM 树中冒泡，防止任何父处理程序收到事件通知。