No .on event firing. Asp.NET Core 6, JQuery

I am building an ASP.NET Core 6, JQuery application.

I have the following JQuery on my page

@section Scripts {
    @{
        await Html.RenderPartialAsync("_ValidationScriptsPartial");
    }
    <script>

        $(function () {
           $('#postcodeKnown').on('click', function () {
             alert("Changed")
           });
        });

    </script>
 }

I was wanting the on click event to fire on the following check box control –

<div class="row">
   <label class="control-label col-md-4">(02) Known</label>
   <div class="col-md-3 mb-1">
      <input id="postcodeKnown" type="checkbox" title="Please check if postcode is known." class="chkBox d-inline-flex mr-4 col-md-1" />
   </div>
</div>

The HTML rendered by the browser is –

<input id="postcodeKnown" type="checkbox" title="Please check if postcode is known." class="chkBox d-inline-flex mr-4 col-md-1">

Nothing happens when I click on the checkbox.

I have tried –

@section Scripts {
    @{
        await Html.RenderPartialAsync("_ValidationScriptsPartial");
    }
    <script>

        $(function () {
            $('#<%=postcodeKnown.ClientID%>').on('click', function () {
            alert("Changed");
        });
        
    </script>
 }

Still doesn’t work

I have tried it without the $(function () { around it, nothing.

At the bottom of my _layout.cshtml I have –

<script src="~/lib/jquery/dist/jquery.min.js"></script>
<script src="~/lib/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
<script src="~/js/site.js" asp-append-version="true"></script>
@await RenderSectionAsync("Scripts", required: false)

Any help would be greatly appreciated.