jquery - 使用 HTML 中的 JQuery 使表格单元格不可点击

Question

我有一个这样的表:

<table>
 <thead>
   <tr>
    <th>Should not be clickable</th>
    <th>Should be clickable</th>
    <th>Should be clickable</th>
  </tr>
</thead>

<tbody>
   <tr>
     <th><input type="checkbox"></th>
     <th>Content that should be clickable</th>
     <th>Content that should be clickable</th>
  </tr>
</tbody>
</table>

但要大得多。

然后我有这个jquery:

$('.table > tbody > tr').click(function() {

//Things happens

});

我不想在单击复选框时触发 jQuery，但在单击行 (tr) 时触发 JQuery。

现在它总是触发 JQuery，即使我只是单击复选框。

有什么帮助吗？

Answer 1

试试这个:您可以将复选框的单击处理程序放入 th 或 td 中，然后返回而不执行任何操作。使用stopPropagation

$(function(){
  $('table > tbody > tr input[type="checkbox"]').click(function(event) {
   event.stopPropagation();
});

$('table > tbody > tr').click(function() {
   alert("row clicked");
});
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
 <thead>
   <tr>
    <th>Should not be clickable</th>
    <th>Should be clickable</th>
    <th>Should be clickable</th>
  </tr>
</thead>

<tbody>
   <tr>
     <th><input type="checkbox"></th>
     <th>Content that should be clickable</th>
     <th>Content that should be clickable</th>
  </tr>
</tbody>
</table>