window.onload后追加的radio单选框trigger事件触发失效如何解决？

问题根本原因 #

你绑定.radioClass的change事件时，通过$.getJSON异步加载后动态生成的radio元素还没被插入到DOM里，所以事件只绑定到了页面初始就存在的id=all的radio上，后续动态新增的元素没有绑定上对应的事件。

解决方案1：使用事件委托（优先推荐） #

把事件绑定到页面初始就存在的父级元素上，利用事件冒泡机制触发回调，不需要关心后续新增的子元素，代码修改如下：

window.onload = function() {
    $.getJSON("results-stress.json", addTaskUI);
    // 把事件绑定到已经存在的父容器上，示例用document兜底，如果你页面里的#radioButtons是初始就存在的固定元素，替换成$("#radioButtons")性能更好
    $(document).on("change", ".radioClass", function () {
        alert("hello");
        alert(this.value);
    });
}

解决方案2：动态元素插入完成后再绑定事件 #

把事件绑定的逻辑放到addTaskUI函数的末尾，等所有动态radio都被append到DOM之后再执行绑定：

function addTaskUI(task){
    for (var key in task) {
        var keyUpperCase = key.toUpperCase();
        $("#radioButtons ul").append('<li><label for="'+key+'"><input type="radio" name="task" id="'+key+'" class="radioClass" value="'+key+'">'+keyUpperCase+'</label></li>');
    }
    // 所有元素插入完成后再绑定事件
    $(".radioClass").change(function () {
        alert("hello");
        alert(this.value);
    });
}
window.onload = function() {
    $.getJSON("results-stress.json", addTaskUI);
}

这种方式也能解决问题，但如果后续你还有其他逻辑会新增.radioClass元素，需要重复绑定，不如事件委托方便。

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