Parent / Child 点击事件的元素绑定
Parent / Child element bindings for click event
我正在使用 jQuery tablesorter - 我在每一行上都有复选框,基本上想在 <th>
元素中有一个 "select all" 复选框。
我实际上无法访问点击事件,即使在该特定列上禁用了 tablesorter 之后也是如此。
简单的 JS 测试:
$('input[type="checkbox"].select-all').on("click", function(e){
console.log("Clicked!");
});
Click 事件什么都不做,这就是为什么我假设 tablesorter 绑定到 parent <th>
元素的原因。 header:
<tr>
<th class="no-sort"><input type="checkbox" class="select-all" /></th>
<th>Some Sortable title</th>
</tr>
关于如何访问 child 复选框事件有什么想法吗?我已将该列设置为不通过以下方式排序:
// Table-sort
var noSortHeaders = {};
$("table").find("th.no-sort").each( function(index, el){
noSortHeaders[ $(this).index() ] = {sorter: false};
});
$("table").tablesorter({
headers: noSortHeaders
});
如果复选框是在 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!');
});
我正在使用 jQuery tablesorter - 我在每一行上都有复选框,基本上想在 <th>
元素中有一个 "select all" 复选框。
我实际上无法访问点击事件,即使在该特定列上禁用了 tablesorter 之后也是如此。
简单的 JS 测试:
$('input[type="checkbox"].select-all').on("click", function(e){
console.log("Clicked!");
});
Click 事件什么都不做,这就是为什么我假设 tablesorter 绑定到 parent <th>
元素的原因。 header:
<tr>
<th class="no-sort"><input type="checkbox" class="select-all" /></th>
<th>Some Sortable title</th>
</tr>
关于如何访问 child 复选框事件有什么想法吗?我已将该列设置为不通过以下方式排序:
// Table-sort
var noSortHeaders = {};
$("table").find("th.no-sort").each( function(index, el){
noSortHeaders[ $(this).index() ] = {sorter: false};
});
$("table").tablesorter({
headers: noSortHeaders
});
如果复选框是在 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!');
});