jQuery动态添加的checkbox点击事件不生效，如何获取其值？

你当前采用的是直接事件绑定逻辑：当绑定代码执行时，jQuery只会为页面初始加载阶段已经存在的、匹配input[name="team-members[]"]选择器的元素附加click事件监听。
后续通过AJAX动态插入的复选框，是在绑定代码执行完成后才生成的DOM节点，完全没有被绑定逻辑覆盖，因此点击这些动态节点时不会触发任何回调，也不会抛出JS报错——毕竟新节点本身就没有绑定任何点击事件。

使用jQuery的事件委托机制实现绑定，核心是将事件绑定到页面初始加载就存在、不会被AJAX动态移除/替换的稳定祖先节点上；当点击事件顺着DOM树冒泡到这个祖先节点时，再判断实际被点击的元素是否匹配目标选择器，匹配则执行对应回调。

核心实现代码 #

// 优先选择离动态复选框最近的、初始就存在的稳定父节点（比如所有.member节点的外层包裹容器）
// 尽量避免直接绑定在document/body上，减少事件冒泡过程的性能消耗
$('页面初始就有的稳定父级选择器').on('click', 'input[name="team-members[]"]', function(){
    // 回调内的this指向实际被点击的复选框元素，无论它是初始加载的还是动态新增的
    alert($(this).val());
});

注意事项 #

• 删除之前写的直接绑定事件的代码，否则页面初始存在的复选框会被重复绑定两次事件，导致弹窗连续触发两次
• 如果需要仅在复选框处于选中状态时才取值，可在回调中补充状态判断：

$('页面初始就有的稳定父级选择器').on('click', 'input[name="team-members[]"]', function(){
    if ($(this).prop('checked')) {
        alert('当前选中的成员ID：' + $(this).val());
    }
});

内容的提问来源于stack exchange，提问作者shanebp