jquery - 页面加载时触发 jQuery 的 .on() 事件

Question

我需要 jQuery 的 .on() 事件在页面加载后触发。我有一些基于前一个屏幕上的用户选择动态生成的复选框。我有代码可以做我想做的事，但我已经将它绑定到“body”点击事件以允许我测试它是否有效。

我所拥有的是以下内容，并且需要在页面加载而不是正文单击时立即触发。

$('body').on('click', function (e) {
    $("input:checkbox").each(function () {
        if ($(this).attr("disabled") == "disabled") {
            $(this).parent().addClass('disabled');
        }
    });
});

Answer 1

jQuery(document).ready(function($) {
    $("input:checkbox").each(function () {
        if ($(this).attr("disabled") == "disabled") {
            $(this).parent().addClass('disabled');
        }
    });
});

document.ready 处理程序使函数在页面加载完成时激活。

Answer 2

为您提供两种可能性：

1）只需将包含代码的脚本标记放在页面的最后，就在结束</body>标记之前，然后将其从事件处理程序中删除：

<script>
$("input:checkbox").each(function () {
    if ($(this).attr("disabled") == "disabled") {
        $(this).parent().addClass('disabled');
    }
});
</script>
</body>

届时，HTML 代码上方定义的所有复选框都将可用，参考：

• YUI 网站加速最佳实践
• Google 在 DOM 元素准备就绪时开启

---

2) 或者，如果您有理由将 script 标签放在别处，您可以使用jQuery 的readyevent，它在页面准备好之后但之前onload（通常）触发：

jQuery(function($) {
    $("input:checkbox").each(function () {
        if ($(this).attr("disabled") == "disabled") {
            $(this).parent().addClass('disabled');
        }
    });
});