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. 效果