JQuery动态加载 HTML元素，绑定点击事件无效

1. 问题描述

给定这样一个ajax动态生成的表格

初次在页面加载完成后，在$(document).ready(function(){}）里面对checkbox绑定事件，正常可用。
当进行筛选重新拼接表格后，checkbox点击事件失效。
原因是事件是在js代码执行之后去绑定的，而动态加载html后，事件没有执行绑定，所以失效。

2. 解决办法

jQuery 事件 - delegate() 方法
原代码

 // checkbox点击事件
    $('[name=ckb]:checkbox').change(function () {
        var id = $(this).parent().closest("tr").attr("id");
        if ($(this).prop('checked') == true) {
            selectedTaskId.push(id);
            console.log("点了" + selectedTaskId);
        } else {
            selectedTaskId = selectedTaskId.filter(item => item != id);
            console.log("取消" + selectedTaskId);
        }
    });

修改后的代码

$("#tbodydnc").delegate("[name=ckb]:checkbox","change",function(){
        var id = $(this).parent().closest("tr").attr("id");
        if ($(this).prop('checked') == true) {
            selectedTaskId.push(id);
            console.log("点了" + selectedTaskId);
        } else {
            selectedTaskId = selectedTaskId.filter(item => item != id);
            console.log("取消" + selectedTaskId);
        }
    });

3. 效果

标签：JQuery,checkbox,console,log,selectedTaskId,绑定,item,HTML,id
来源： https://www.cnblogs.com/yddwinter/p/16227389.html