[英]Parent / Child element bindings for click event
I'm using the jQuery tablesorter - I've got checkboxes on each row and essentially want to have a "select all" checkbox inside the <th>
element. 我正在使用jQuery tablesorter-我在每行上都有复选框,并且本质上希望在
<th>
元素内具有“全选”复选框。
I can't actually access the click event, even after disabling the tablesorter on that specific column. 即使在该特定列上禁用了表排序器之后,我实际上也无法访问click事件。
Simple JS test: 简单的JS测试:
$('input[type="checkbox"].select-all').on("click", function(e){
console.log("Clicked!");
});
Click event does nothing, which is why I'm presuming the tablesorter is binded to the parent <th>
element. Click事件不执行任何操作,这就是为什么我认为tablesorter绑定到父
<th>
元素的原因。 The header: 标头:
<tr>
<th class="no-sort"><input type="checkbox" class="select-all" /></th>
<th>Some Sortable title</th>
</tr>
Any ideas on how to access that child checkbox event? 关于如何访问该子复选框事件的任何想法? I have set that column to not sort via:
我已将该列设置为不通过以下方式进行排序:
// Table-sort
var noSortHeaders = {};
$("table").find("th.no-sort").each( function(index, el){
noSortHeaders[ $(this).index() ] = {sorter: false};
});
$("table").tablesorter({
headers: noSortHeaders
});
If the checkbox is created after DOM ready
event, you do want to use event delegation. 如果复选框是在
DOM ready
事件之后创建的,则您确实要使用事件委托。 And I would prefer the change
event to the click
event: 我更喜欢
change
事件而不是click
事件:
$(document).on('change', 'input[type=checkbox].select-all', function(e) {
console.log('Changed!');
});
Or, better still: 或者,更好的是:
$('table').on('change', 'input[type=checkbox].select-all', function(e) {
console.log('Changed!');
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.