Checkbox change event not working inside partial view mvc

Question

I have one partial view page having 3 radio buttons namely All Employees,Designation & Confirmation Date.By default first is selected.on click of third radio button i need to enter date in textbox after that ajax call is made and data filtered by date is renderd in div tag.
///the following is code for that partial view

@model HRMS.Models.EligibilityCriteriaModel
<script src="@Url.Content("~/Scripts/jquery.validate.unobtrusive.min.js")" type="text/javascript"></script>
<script src="@Url.Content("../../Scripts/jquery.unobtrusive-ajax.min.js")" type="text/javascript"></script>
@{
    ViewBag.Title = "Index";    
}
@Html.HiddenFor(modelItem => modelItem.allConfirmationDateEmployeeListCount, new { id = "ConfirmationDateEmpListCount" })
@if (Model.allConfirmationDateEmployeeList != null)
{
<table cellpadding="0" cellspacing="0" border="0" width="100%" id="tbl_allEmployees"
    class="TablesBlueHeaders">
    <thead>
        <tr>
            <th width="10%" class="bluebgtable1">
                Employee Code
            </th>
            <th class="bluebgtable1" width="15%">
                Employee Name
            </th>
            <th class="bluebgtable1" width="15%">
                Delivery Team
            </th>
            <th class="bluebgtable1" width="15%">
                Designation
            </th>
            <th class="bluebgtable1" width="15%">
                Confirmation Date
            </th>
            <th class="bluebgtable1" width="15%">
                Select
            </th>
        </tr>
    </thead>
    <div class="abc" id="SampleID">
        @foreach (var item in Model.allConfirmationDateEmployeeList)
        {
        <tr id="@item.EmployeeID" class="highlightRed">
            <td align="center">
                @Html.DisplayFor(modelItem => item.EmployeeCode, new { @readonly = "readonly" })
            </td>
            <td>
                @Html.DisplayFor(modelItem => item.EmployeeName, new { @readonly = "readonly" })
            </td>
            <td>
                @Html.DisplayFor(modelItem => item.DeliveryTeam, new { @readonly = "readonly" })
            </td>
            <td>
                @Html.DisplayFor(modelItem => item.Designation, new { @readonly = "readonly" })
            </td>
            <td>
                @Html.DisplayFor(modelItem => item.ConfirmationDate, new { @readonly = "readonly" })
            </td>
            <td align="center">
                @Html.CheckBoxFor(modelItem => item.Checked, new { @class = "chkAllConfDateEmployees", @id = item.EmployeeID, @for = item.AppraisalYearID })
            </td>
        </tr>
        }
    </div>
</table>
}

now this view will be rendered in div. Now in my child partial view i am unable to get change event of checkbox.which i want to count on change event.

The image shows a partial view page having a textbox and search button.on button click i need to render other partial view in the div tag below search button.this view will have check box and i check box change event is not working over there. Hope you may understand what i am trying to say.![enter image description here][1]

Answer 1

If you are doing partial views, and monitoring the change events using JQuery selectors, you can run into one of two traps (note: if you are not using JQuery, this is irrelevant)

1. If the JQuery script is above your element in the DOM, it will not execute on it. To solve this, you should put all your JQuery selectors (e.g. $('input').on('change'...) inside a document.ready event. ($(document).ready(function() { ... your jquery here ...});
2. If your partial views are rendered via AJAX, you will need to re-instantiate any JQuery selectors inside them. They are loaded after the document ready event

Let me know if this helps.