如何用原生JavaScript替代jQuery的$(document).ready？

我有如下jQuery代码，用于用户选中表单内任一单选按钮时启用提交按钮：

$(document).ready(function(){
    //enable submit button once user makes a radio button selection
    if (document.querySelector('input[name="benefitType"]')) {
        document.querySelectorAll('input[name="benefitType"]').forEach((elem, i) => {
            elem.addEventListener("change", function(event) {
                document.querySelector('#benefit-quote-submit').disabled = false;
            });
        });
    }
});

我尝试用原生JavaScript替代$(document).ready，写了以下代码，但无效——设置在elem.addEventListener行的断点未触发执行，而用jQuery版本时正常运行：

if(document.readyState === 'ready' || document.readyState === 'complete') {
  doSomething();
}

请问该如何解决？

你的代码只判断了当前的document.readyState，如果脚本执行时DOM还未就绪（比如readyState是loading），就不会执行事件绑定逻辑。而$(document).ready的核心是：不管脚本什么时候执行，都会在DOM结构完全加载完成后触发回调。

正确的原生写法有两种：

方法一：监听DOMContentLoaded事件 #

这是最接近$(document).ready的原生实现，DOM结构加载完成就触发，无需等待样式、图片等资源：

function enableSubmitOnRadioSelect() {
    const radioButtons = document.querySelectorAll('input[name="benefitType"]');
    if (radioButtons.length > 0) {
        radioButtons.forEach(elem => {
            elem.addEventListener("change", () => {
                document.querySelector('#benefit-quote-submit').disabled = false;
            });
        });
    }
}

// 监听DOM就绪事件
document.addEventListener('DOMContentLoaded', enableSubmitOnRadioSelect);

// 兼容脚本在DOM就绪后才加载的情况
if (document.readyState === 'interactive' || document.readyState === 'complete') {
    enableSubmitOnRadioSelect();
}

方法二：将脚本放在</body>标签前 #

如果可以控制脚本的加载位置，直接把脚本放在页面最后、</body>闭合标签之前，此时DOM已经完全就绪，不需要额外判断：

<body>
    <!-- 页面内容 -->
    <script>
        const radioButtons = document.querySelectorAll('input[name="benefitType"]');
        if (radioButtons.length > 0) {
            radioButtons.forEach(elem => {
                elem.addEventListener("change", () => {
                    document.querySelector('#benefit-quote-submit').disabled = false;
                });
            });
        }
    </script>
</body>

原代码无效的原因 #

你的代码只在脚本执行时检查readyState，如果此时DOM还在加载中（readyState为loading），就会跳过执行，导致事件从未绑定。上面的方法一通过监听事件+兜底判断，覆盖了所有可能的执行时机。

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