Question

I need jQuery’s .on() event to fire when the page has loaded. I have some dynamically generated checkboxes based on the users selections on the previous screen. I have code that does what I want it to but i’ve bound it to the ‘body’ click event to allow me to test it works.

What I have is the following and need this to trigger as soon as the page loads instead of the body click.

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

Answer 1

Two possibilities for you:

1) Just put your script tag containing your code at the very end of the page, just before the closing </body> tag, and remove it from within an event handler:

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

All of the checkboxes defined above the code in the HTML will be available at that point, references:

• YUI Best Practices for Speeding Up your Website
• Google on when DOM elements are ready

---

2) Alternately, if you have some reason to put the script tag elsewhere, you can use jQuery’s ready event, which fires after the page is ready but before onload (usually):

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