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单击处理程序放在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>

Answer 2

首先，您应该将您的jquery更新为：

Access-Control-Allow-Origin

通过执行此操作，您可以告诉jQuery为所有单元格执行单击功能，但具有“无法点击”等级的单元除外。

然后您更新html代码，并添加“不可点击”＆＃39;要跳过单击函数的单元格的类。

$('table tr th:not(.not-clickable), table tr td:not(.not-clickable)').on('click', function() {
    //Things happens 
});

我还注意到你在表格中使用 th 而不是 td 。它的工作原理是因为浏览器很聪明，但在 tbody 中放置并不是一个好习惯。不符合W3C。

这是一个完整的代码片段：

＆＃13;

<table>
 <thead>
   <tr>
    <th class='not-clickable'>Should not be clickable</th>
    <th>Should be clickable</th>
    <th>Should be clickable</th>
  </tr>
</thead>

<tbody>
   <tr>
     <td class='not-clickable'><input type="checkbox"></td>
     <td>Content that should be clickable</td>
     <td>Content that should be clickable</td>
  </tr>
</tbody>
</table>

＆＃13;

$('table tr th:not(.not-clickable), table tr td:not(.not-clickable)').on('click', function() {
    //Things happens 
    alert('Yeey! Is clickable');
});

＆＃13;

Answer 3

如果是复选框，只需检查目标形式

$(function() {
  $('.table > tbody > tr').click(function(event) {
    if (!$(event.target).is(':checkbox')) {
        console.log('click');
    }
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class='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>

Answer 4

你可以尝试这个（如果你需要避免点击复选框）

<input type="checkbox" onclick="return false;">

否则，您可以使用复选框中的已禁用属性。

基本上取决于您的需求。用户是否能够以某种方式单击该复选框？

Answer 5

您可以这样做：

$('table tr th:not([not-clickable])').click(function() {
  alert("Things happens");
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
 <thead>
   <tr>
    <th not-clickable>Should not be clickable</th>
    <th>Should be clickable</th>
    <th>Should be clickable</th>
  </tr>
</thead>

<tbody>
   <tr>
     <th not-clickable><input type="checkbox"></th>
     <th>Content that should be clickable</th>
     <th>Content that should be clickable</th>
  </tr>
</tbody>
</table>

使用HTML中的JQuery使表格单元格无法点击

5 个答案: