Question

我正在使用jQuery tablesorter - 我在每一行都有复选框，并且基本上希望在<th>元素中有一个“全选”复选框。

即使在该特定列上禁用了tablesorter，我也无法实际访问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!');
});

click事件的父/子元素绑定

1 个答案: