jQuery中Ajax动态创建的radio按钮change事件不触发如何解决

.change()属于直接绑定方式，仅会给绑定代码执行时已经存在于DOM树中的匹配元素挂载事件。你的单选按钮是Ajax异步请求完成后才动态插入页面的，事件绑定执行时这些元素还未生成，自然无法触发回调。

使用jQuery的事件委托机制即可满足需求，你完全可以把绑定逻辑放在Ajax外部，不需要写在请求的success回调里。
事件委托的原理是把事件挂载到页面初始加载时就存在的静态父容器上，通过事件冒泡机制检测触发源，只要触发事件的子元素匹配你指定的选择器，就会执行回调，不管这个子元素是页面初始就有的，还是后续动态插入的。

实现代码 #

// 第一个选择器替换为承载单选按钮的静态父容器即可
// 注意：你原有代码中$("xdiv")是匹配<xdiv>自定义标签的选择器，如果是id为xdiv的容器请改为$("#xdiv")，类名则改为$(".xdiv")
$("xdiv").on("change", "input[type=radio][name=xradio]", function() {
    alert("DO SOMETHING");
    // 原有业务逻辑直接写在这里，$(this) 指向当前选中的单选按钮
    // 后续触发新Ajax、生成其他动态元素的逻辑都可以直接放在这里，不需要重复绑定事件
});

注意点 #

• 父容器尽量选择离动态元素最近的静态节点，不要图省事直接绑定到$(document)，能缩短事件冒泡路径，性能更好
• 这种绑定方式对所有后续插入的匹配元素都生效，哪怕是后续操作中新增的同name单选按钮，也不需要重新执行绑定代码
• 回调内的使用方式和你之前写的直接绑定完全一致，不需要修改原有业务逻辑

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