點擊事件的父/子元素綁定

Question

我正在使用jQuery tablesorter-我在每行上都有復選框，並且本質上希望在<th>元素內具有“全選”復選框。

即使在該特定列上禁用了表排序器之后，我實際上也無法訪問click事件。

簡單的JS測試：

$('input[type="checkbox"].select-all').on("click", function(e){
  console.log("Clicked!");
});

Click事件不執行任何操作，這就是為什么我認為tablesorter綁定到父<th>元素的原因。 標頭：

<tr>
  <th class="no-sort"><input type="checkbox" class="select-all" /></th>
  <th>Some Sortable title</th>
</tr>

關於如何訪問該子復選框事件的任何想法？ 我已將該列設置為不通過以下方式進行排序：

// Table-sort
var noSortHeaders = {};
$("table").find("th.no-sort").each( function(index, el){
  noSortHeaders[ $(this).index() ] = {sorter: false};
});
$("table").tablesorter({
    headers: noSortHeaders
});

Answer 1

如果復選框是在DOM ready事件之后創建的，則您確實要使用事件委托。 我更喜歡change事件而不是click事件：

$(document).on('change', 'input[type=checkbox].select-all', function(e) {
    console.log('Changed!');
});

或者，更好的是：

$('table').on('change', 'input[type=checkbox].select-all', function(e) {
    console.log('Changed!');
});