动态生成的 radio 的 onclick 不生效是因为 DOM 节点在绑定时不存在，应使用事件委托并监听 change 事件；需挂载到静态父容器，通过 event.target.type 和 name 判断，避免手动绑定冲突框架响应式机制。
动态生成的 radio 为什么 onclick 不生效？
因为 DOM 节点在绑定事件时还不存在，直接对 document.querySelectorAll('input[type="radio"]') 遍历加 addEventListener 会漏掉后续插入的节点。原生写法必须用事件委托，不能靠“生成后立刻绑定”这种直觉操作。
用 event.target 判断是否点击了 radio（推荐）
把事件监听器挂到父容器（比如 <form></form> 或带 id 的 <div>），在回调里检查 <code>event.target 类型和 name 属性，避免重复绑定、内存泄漏，也兼容未来新增的 radio。
document.getElementById('radio-container').addEventListener('change', function (e) {
if (e.target.type === 'radio' && e.target.name === 'choice') {
console.log('选中值：', e.target.value);
}
});
-
change比click更可靠：用户用空格/回车切换时也能捕获 - 务必检查
e.target.name，防止误触其他 radio 组 - 不要用
click+e.target.checked判断，移动端可能不准
Vue/React 等框架里别手动绑事件
框架有响应式机制，强行用原生 addEventListener 容易和框架的更新逻辑冲突，比如 Vue 的 v-model 已经处理了 radio 的选中同步。
- Vue 中直接用
v-model="selectedValue"，无需额外绑定 - React 中用
value+onChange控制受控组件 - 如果非要用原生事件（比如集成第三方库），确保在
useEffect或mounted里绑定，并在卸载时removeEventListener
jQuery 里用 on() 代理比 click() 安全
老项目还在用 jQuery？别写 $('input[name="choice"]').click(...)，它只绑定当前存在的元素。
立即学习“前端免费学习笔记（深入）”；
$('#radio-container').on('change', 'input[type="radio"][name="choice"]', function () {
console.log('选中：', $(this).val());
});
- 第二个参数是选择器字符串，表示“委托给匹配该选择器的后代元素”
- 仍建议用
change而非click，语义更准 - 如果容器本身是动态插入的，要把事件挂到更外层静态节点（如
document），但要加防抖或过滤，避免性能问题
name 或没设 value，导致 change 事件触发但读不到有效值。检查 DOM 里每个 radio 是否都有 name 和 value，比调试事件绑定更重要。
