jQuery：整个表格行突出显示，但单击某些子元素时除外

Question

我的问题是如何使用jQuery使父级可单击，但不单击某些子元素（例如复选框或超链接）？ 同时，我希望允许自己点击子元素（例如：超链接是否需要工作？

详细地说，当单击表中的一行时，我希望它向该行添加一个选中的类以突出显示它。

我在每行中都有一个复选框，可以切换已选中的类。 因此，我计划在单击行时使用trigger()单击此复选框。 您将在我的JSFiddle示例中看到。

我遇到的问题是，如果他们单击复选框本身或行中的超链接，我不希望它触发单击。

我希望使用选择器，例如$('td :not(a,input)')可以工作，但显然我不正确地单击子元素，因为这不起作用。

在我的同一JSFiddle示例中，如果您单击复选框，则会在默认示例中注意到

我一直在浏览网络以寻找答案，但似乎没有人在完全按照我的目标去做。

Answer 1

您可能可以替换为：

$('td :not(a,button,.custom-checkbox)').on('click', function() {
    $(this).closest('tr').find('input').trigger('click');
});

为了这

$('td').on('click', function(e) {
  var $target = $(e.target); //This will get the element that is actually being clicked      
  if (!$target.is("a,button,.custom-checkbox, [type=checkbox]")) {
    //If the element being clicked doesn't belong to the group of the "unclickable" elements
    //I also added checkboxes to the "unclickable" elements
    $(this).closest('tr').find('input').trigger('click');
  }
});