jQuery：使用load()函数加载内容后按值选中单选按钮失效问题

我一眼就看出问题所在了——load()是异步函数！你现在的代码里，刚调用load()就立刻去设置单选按钮的选中状态，这时候g1q1.html里的内容还没加载到DOM里呢，那些单选按钮根本不存在，自然选不中。而你在控制台执行代码的时候，页面已经完成加载了，元素都在，所以能正常生效。

正确的写法是把选中逻辑放到load()的回调函数里 #

回调函数会在load()请求完成、内容成功插入到DOM之后才执行，这时候再去操作单选按钮就没问题了：

$(document).on("click", "#g1q2back", function() { 
    // 清空div
    $(".hero").empty(); 
    // 向div加载其他内容，使用回调函数处理后续逻辑
    $('.hero').load("./pages/g1q1.html", function() {
        // 这里的代码会在内容加载完成后执行
        // 推荐用prop设置布尔属性，比attr更准确
        $("input[name=question1][value=" + 3 + "]").prop('checked', true); 
    });
});

额外说明：为什么用prop而不是attr？ #

对于checked这种布尔类型的属性，jQuery官方推荐用prop()来设置，因为attr()是操作HTML属性，而prop()是操作DOM元素的属性状态。当你用attr('checked', 'checked')的时候，有时候会因为浏览器的属性缓存问题出现异常，用prop('checked', true)更可靠。

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