Sorry for the poor title, I genuinely don't know how to title this question, but essentially what I am trying to do is, after everything has loaded on the page, I want to change a drop-down list selection and reload the table data, I have the following code:

@section Scripts {
@Scripts.Render("~/bundles/jobs")
<script type="text/javascript">
    $(function () {
        $("body").data("Jobs.Index", new Jobs.Index({
            detailsUrl: '@Url.Action("Details")',
            applyUrl: '@Url.Action("Apply")',
            keyword: '@Html.Raw(HttpUtility.JavaScriptStringEncode(keyword))',
            showMaxResultsByDefault: @settings.ShowMaxResultsByDefault.ToString().ToLower()
        }));
    });

    $(window).on('load', function () {
        if (showMaxResultsByDefault) {
            $('.koDataTable_pageSizesWrapper select').val('100');
            $('#jobsTable').load();
        }
    });
</script>

}

I needed to move the $(window).on(.... code to one of our existing .ts files, which is called in the $(function () {... code, so I added it right at the bottom of the code in the .ts file, but now it's giving the following error when hitting $('#jobsTable').load();:

Uncaught TypeError: Cannot read properties of undefined (reading 'indexOf')

By my understanding of the error, the jobsTable table does not exist yet, hence the error, but isn't it suppose to be created by now, considering it's in the $(window).on(... code? This should be running after everything on the page is loaded.

I can only think that it comes down to the order of events, so I'm missing something, as I thought that running the code in my $(window).on(... code, would run after the DOM was created, etc..

Been struggling with this silly thing for a couple of hours, help would be greatly appreciated!

It might be worthy to mention, I am using Knockout Data Tables to populate this table.