check box not working with datatable.js pagination's second page

Question

I am using datatable.js for pagination:

When I check a checkbox inside table row, I have to show Lock/Delete buttons which are out side the table. For this I have Done Below jQuery Code:

 $(document).ready(function () {      

    $('#tblID :input[type="checkbox"]').on('click',function () {
        var checkedBoxes = $('#tblID:input[type="checkbox"]:checked').length;

        if (checkedBoxes > 0) {
            alert(checkedBoxes);
            $("#lnkLock").show();
            $("#lnkDelete").show();

        }
        else {
            alert(checkedBoxes);
            $("#lnkLock").hide();
            $("#lnkDelete").hide();
        }
    });
 });

It is working Only on The First Page of table.When I navigate to second page of datatable /Table it stops working(Buttons (lock/delete)) are not shown.

On second, third...pages checkbox click event is also not fired.

How can I do it on other pages?

Answer 1

Assign a class say chkClassName to your checkbox and change your code a little bit as below:

 $('#tblID').on("change", ".chkClassName", function (event) {
        var checkedBoxes = $('#tblID :input[type="checkbox"]:checked').length;
        if (checkedBoxes > 0) {               
            $("#lnkLock").show();
            $("#lnkDelete").show();
        }
        else {             
            $("#lnkLock").hide();
            $("#lnkDelete").hide();
        }
    });