jQuery Click 事件未附加到网格行内的复选框

Question

我有剑道网格。网格的第一列有复选框，标题有全选复选框。
预期行为
可能我们已经在几个网站上看到了这种行为。当用户单击全选时，应选中所有复选框。如果用户未选中全选，则应取消选中所有复选框。此外，如果用户选择或取消选择行中的单个复选框，则“全选”复选框也应根据选中的复选框数量进行切换。

我从渲染的 HTML 中复制了网格。 （并删除了一些额外的列）并附加了 javascript 函数。

问题
文档就绪功能中附加了 2 个单击事件。一个用于全选复选框，另一个用于每行中的复选框。 下面是我的代码sn-p。如果您运行代码，那么它完全按照我的意愿工作。但是，相同的代码在我的机器上不起作用。 当我调试时我发现，行中复选框的单击事件永远不会被触发。不知道为什么它在这里工作，但不是我的机器。我正在使用 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

我想我找到了。我将单击事件附加到文档就绪事件中行中的复选框。我的情况是页面加载时网格中不会有任何行。所以我必须在网格的 dataBound 事件中附加 click 事件，而不是 document ready 事件。