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.