Issues with adding checkbox to column headers

kiasta

So I'm trying to add checkboxes to the column headers to toggle whether those column should be enabled for search filtering. I've added the checkboxes but the jQuery checked/click event does not seem to fire when checking/clicking them. Also, how would I prevent the column from sorting when they click the checkbox? As of now they are sorting every time I check the checkboxes. I've tried looking for examples, but I've come up short. It should also be noted that I am also using knockout, though that shouldn't matter too much.

My code here:

                var table = $("#datatables").DataTable();
                table.destroy();
                $("#datatables").empty();

                table = $("#datatables").DataTable({
                    orderMulti: false
                    , pageLength: 10
                    , processing: true
                    , serverSide: true
                    , searching: true
                    , searchDelay: 500
                    , searchHighlight: true
                    , ajax: {
                        url: Utilities.GetAbsolutePath("~/Search"),
                        type: "POST",
                        data: function (data) {
                            data.Query = self.SelectedQuery().Query;
                            data.Headers = self.FilterHeaders();
                            return data;
                        }
                    }
                    , columns: self.Headers()
                });

                table.columns().iterator('column', function (context, index) {
                    $(table.column(index).header()).prepend('<input class="dataTable-column-checkbox" type="checkbox"/><br />');
                });

$(document).ready(function () {
    $(".dataTable-column-checkbox").on("checked", function () {
        alert(0);
    });

    window.pageModel = new Models.PageModel(sourceModel);
    ko.applyBindings(pageModel);
});

I've tried adding the jQuery checked event binding before and after the knockout binding and I still got nothing. The checkboxes check/uncheck as expected however no event is firing. Any help/examples would be appreciated, thanks!

HPB

You can use event.stopPropagation() on a click handler to cancel the click on the parent element.
After a click event on the checkbox you can evaluate the state of the checkbox and execute your code accordingly.

I've put together a simple test case that works here

kiasta

Huh, that's interesting the click event works on that demo but I'm unable to get the event to fire on my end. I've tried both click and checked. I guess I'll have to dig through my code and see where the problem lies. It could just be an issue with knockout itself but I'm not really using knockout in any part of this functionality so I'm unsure. Thanks a lot for your assistance that is exactly what I was looking for.

Edit: Figured out the issue, and it's now working. It was a knockout issue. Thanks again!