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

我正在使用jQuery表排序器——我在每一行上都有复选框，基本上希望在

元素中有一个“全选”复选框

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

简单JS测试：

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

Click事件不起任何作用，这就是为什么我假定tablesorter绑定到父元素

上。标题：

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

---

如果复选框是在

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

---

也许使用事件委派会起作用$（“表”）。在（“单击”上，输入[type=“checkbox”]。全选“，函数（evt）{}）；您的代码在这里看起来很好，fiddle不包括jquery表排序器，但是委托工作正常。想把它作为答案，我会接受它吗？@user2182349，请看上面的评论是为我做的，但它也应该适用于原始版本。注意：原始的tablesorter不支持多tbody排序。

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