使用表格行内的输入复选框，我可以将单击事件添加到行中并且仍然能够单击输入

with an input checkbox inside a table row, can i add click event to row and still be able to click input

本文关键字：输入 单击 添加 表格 复选框 我可以 事件      更新时间：2023-09-26

我有一个表格：

<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 部分的答案是肯定的。

您可以使用 event.stopPropagation（） 试试这个：-

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

演示

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

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

现场演示

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

另一种替代方法是为checkbox添加附加单击处理程序，即在checkbox事件源时跳过 tr 单击处理程序的处理。

现场演示

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

use event.stopPropagation（）;

定义

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

相关文章：