单击事件的父/子元素绑定答案

【问题标题】：Parent / Child element bindings for click event单击事件的父/子元素绑定
【发布时间】：2015-06-22 01:28:22
【问题描述】：

我正在使用 jQuery 表格排序器 - 我在每一行都有复选框，并且本质上希望在 <th> 元素内有一个“全选”复选框。

我实际上无法访问 click 事件，即使在该特定列上禁用了 tablesorter 之后也是如此。

简单的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
});

【问题讨论】：

也许使用事件委托会起作用？ $("table").on("click",'input[type="checkbox"].select-all', function(evt) {});
你的代码在这里看起来不错jsfiddle.net/ammarcse/LvLytmch
小提琴不包括 jquery tablesorter，但委托工作。想把它作为答案，我会接受吗？
@user2182349，见上面的评论
This demo 是为我的fork of tablesorter 制作的，但它也应该适用于原版。注意：原tablesorter不支持多tbody排序。

标签： javascript jquery tablesorter

【解决方案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!');
});

【讨论】：