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');
  }
});