Событие jQuery Click не привязывается к флажкам внутри строк сетки

Question

У меня есть сетка кендо. В первом столбце сетки есть флажки, а в заголовке установлен флажок.
Ожидаемое поведение
Возможно, мы видели это поведение на нескольких веб-сайтах. когда пользователь нажимает кнопку выбора, все флажки должны быть выбраны. Если пользователь не отмечен, выберите все, тогда все флажки должны быть отменены. Кроме того, если пользователь выбирает или отменяет выбор отдельного флажка в строке, тогда флажок «выбрать все» также должен быть переключен в зависимости от того, сколько флажков выбрано.

Я скопировал сетку, как она есть из визуализированного HTML. (и удалены некоторые дополнительные столбцы) и добавлены функции javascript.

Выпуск
Есть 2 клик, присоединенные в документе готовой функции. Один для флажка «Выбрать все» и другой для флажков в каждой строке. Ниже приведен фрагмент кода. Если вы запустите код, то он работает здесь точно так, как я хотел. Однако тот же код не работает на моей машине. Когда я отлаживаю, я обнаружил, что событие click для флажков в строках никогда не запускается. Не знаю, почему это работает здесь, но не моя машина. Я использую IE 10

$("#assetImportDetail th input:checkbox").click(
 
     function() { 
 
      $("#assetImportDetail td input:checkbox").prop("checked", $(this).prop("checked")); 
 
     } 
 
    ); 
 

 
    $("#assetImportDetail tbody input:checkbox").click(
 
      function() { 
 
       var checkedCount = $("#assetImportDetail td input:checkbox:checked").length; 
 
       var totalCount = $("#assetImportDetail td input:checkbox").length; 
 
       $("#assetImportDetail th input:checkbox").prop("checked", checkedCount === totalCount); 
 
      } 
 
    );

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<div class="k-widget k-grid" id="assetImportDetail" data-role="tooltip"> 
 
    <table role="grid"> 
 
     <colgroup><col style="width: 30px;"><col><col><col><col><col><col><col></colgroup> 
 
     <thead class="k-grid-header" role="rowgroup"> 
 
      <tr role="row"> 
 
       <th class="k-header" scope="col" data-title="Batch Detail ID" data-index="0" data-field="BatchDetailID"> 
 
        <input id="selectAll" type="checkbox"> 
 
       </th> 
 
       <th class="k-header" aria-sort="ascending" scope="col" data-title="State" data-index="1" data-field="BatchKey" data-dir="asc" data-role="columnsorter"><a class="k-link" href="#">State<span class="k-icon k-i-arrow-n"></span></a></th> 
 
       <th class="k-header" scope="col" data-title="Cost" data-index="2" data-field="OriginalCost" data-role="columnsorter"><a class="k-link" href="#">Cost</a></th>     
 
      </tr> 
 
     </thead> 
 
     <tbody role="rowgroup"> 
 
      <tr role="row" data-uid="dd43907a-1d2d-4f7d-9426-5278ffe8a0db"> 
 
       <td role="gridcell"><input name="selectedIds" type="checkbox" value="31"></td> 
 
       <td role="gridcell">TX</td> 
 
       <td role="gridcell">$19,200.00</td>  
 
      </tr> 
 
      <tr class="k-alt" role="row" data-uid="a7e6d3a4-3bff-4f26-8e37-d53485ab50f3"> 
 
       <td role="gridcell"><input name="selectedIds" type="checkbox" value="32"></td> 
 
       <td role="gridcell">TX</td> 
 
       <td role="gridcell">$19,200.00</td>     
 
      </tr> 
 
     </tbody> 
 
    </table> 
 
</div>

Answer 1

Я думаю, что я нашел. Я прикреплял событие click к флажкам в строках в событии готовности документа. В моем случае не будет никаких строк в сетке при загрузке страницы. Поэтому я должен прикрепить событие click в событии dataBound сетки вместо события готовности документа.