Checkbox on change not working in Partial Views rendered through AJAX

Question

I have a page developed using C# MVC3 and partial views. Pagination is implemented using partial view and AJAX . The generated page will have a check box for each record. The idea is to let the user check the box next to each record they want to print. When they click the Print button, which is on the page, only those selected records will be printed. In order to accomplish this I move the selected record into a <div> which is in the layout page and on the click of the print button I use those copied records for print.

I have one    layaout page : _layout.cshtml    
                     View  :  DetailedReport.cshtml
            Partical View  :  `PVdetailedReport.cshtml`

DetailedReport.cshtml and PVdetailedReport.cshtml are exaclty the same.

The very first time (ie for page 1) I am using DetailedReport.cshtml . For the rest of the pages, as they are rendered through ajax calls, I am using PVdetailedReport.cshtml .

The moving of the selected elements into a <div> , when I check the checkbox, works fine for the first page but on the subsequent pages, which are rendered through AJAX and partial view, the moving of the selected element is not working.

Here is the code to move the selected elements into a <div>

  $(":checkbox").on('change', function () {
       if ($(this).hasClass('containerToCopy')) {

            if ($(this).is(':checked')) {
                // If a listing is selected then move it to  divToPrintContainer, which is buried inside _Layout.cshtml
                $(this).closest('table').clone().appendTo("#divToPrintContainer");
               } else {
                // If a listing is UNselected then remove it from  divToPrintContainer
                $('#divToPrintContainer').find("[id='" + "tbl-" + $(this).attr('id') + "']").remove();
            }
    }
});

Answer 1

Try to delegate event listener

$(document).on('change', ":checkbox", function () { ... });

For more visit: http://api.jquery.com/on/