Связывание элементов родительского/дочернего элемента для события click

Question

Я использую jQuery tablesorter - у меня есть флажки в каждой строке и по существу хотят установить флажок «выбрать все» внутри элемента <th>.

Я не могу получить доступ к событию кликов даже после отключения таблиц в этом конкретном столбце.

Простой тест JS:

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

Нажмите событие ничего не делает, поэтому я предполагающее TableSorter является переплетены с родительским <th> элемента. Заголовок:

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

Любые идеи о том, как получить доступ к этому событию checkbox? Я установил, что столбец не сортировать по:

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