javascript - jquery 1.10.2批量选择复选框，回调错误？

Question

这个问题已经有答案了:

Event binding on dynamically created elements? (23 个回答)

已关闭 9 年前。

我读到check/uncheck all checkboxes with jquery 1.10.2他提到没有将函数放入正确的回调中。我在 chrome 开发工具中进行了调试，并注意到在使用其他 jquery 函数添加一行后，复选框监听器没有被命中。

根据jquery“ready”文档，当 DOM 加载完成时，将触发 document.ready 的回调。通过 jquery 处理程序添加一行后，DOM 已完成加载，这就是我看到新行的方式。所以根据我的理解，我应该能够让我的复选框监听器处于“就绪”回调中，不是吗？这是我的代码:

$(document).ready(function() {
        var i = 1;
        $("#add_row").click(function() {
            $('#addr' + i).html("<td><input type='checkbox' class='form-control case'></td>"  + 

                                "<td><input name='name" + i + "' type='text' placeholder='Name' " +
                                "class='form-control input-md'></td>" +

                                "<td><input name='mail" + i + "' type='text' placeholder='Mail' " +
                                "class='form-control input-md'></td>"

                                );

            $('#tab_logic').append('<tr id="addr' + (i + 1) + '"></tr>');
            i++;
        });

        $("#delete_btn_" + i).click(function(event) {
            if (i > 1) {
                $("#addr" + (i - 1)).html('');
                i--;
            }
        });


        // add multiple select / deselect functionality
        $("#selectall").click(function () {
            $('.case').prop('checked', this.checked);
        });

        /* Listen to any checkbox.  After one is toggled,
           if all checkboxes are selected, select the checkall checkbox
           otherwise checkall checkbox shouldn't be checked */
        $(".case").click(function() {
            if($(".case").length == $(".case:checked").length) {
                $("#selectall").prop("checked", "checked");
            } else {
            $("#selectall").removeProp("checked");
            }
        });

    });

Answer 1

    $("body").on('change','.case',function() {
        if($(".case").length == $(".case:checked").length) {
            $("#selectall").prop("checked", "checked");
        } else {
            $("#selectall").removeProp("checked");
        }
    });