Custom checkbox change event not firing after gird page changed

[Meng]

Hi There,

I have a checkbox column in my grid, the change event works fine when page first loaded, but fails after page changed. Following is my code. Any help would be greatly appreciated.

 

@model IEnumerable<WebApplication1.Models.ProductViewModel>
    @(Html.Kendo().Grid(Model)
        .Name("grid")
        .Columns(columns =>
        {
            columns.Bound(c => c.ProductID).ClientTemplate("<input class='checkBoxCustom' type='checkbox' />").Title(" ").Filterable(false).Width(50);
            columns.Bound(p => p.ProductName);
            columns.Bound(p => p.UnitPrice).Width(150);
            //columns.Command(command => command.Destroy()).Width(150);
        })
        .Editable(editable => editable.Mode(GridEditMode.InCell))
        .Pageable()
        .Sortable()
        .Scrollable()
        .HtmlAttributes(new { style = "height:350px;" })
        .DataSource(dataSource => dataSource
            .Ajax()
            .Batch(true)
            .PageSize(2)
            .ServerOperation(false)
            //.Events(events => events.Error("errorHandler"))
            .Model(model =>
            {
                model.Id(p => p.ProductID);
                model.Field(p => p.ProductID).Editable(false);
            })
        )
    )
    <script>
        $(document).ready(function () {

            $('input.checkBoxCustom').on('change', function (e) {
                alert('hi');
            });
        });
    </script>

[Meng]

Issue fixed. For anybody who facing the same, the solution is:

change 

$('input.checkBoxCustom').on('change', function (e) {

to

$(document).on('change', 'input.checkBoxCustom', function (e) {

[Nikolay]

Hello Meng,

I am happy to hear you have managed to resolve the situation and thank you for sharing your solution. This way others may benefit from it.

Indeed, the change event needs to be bound to the document with selector "'input.checkBoxCustom'". This way the event listener is attached to the document, which listens for an event originating from the input with a class "checkBoxCustom" that bubbles up the DOM.

If there is anything else , we could help with, please contact us back.

Regards,
Nikolay
Progress Telerik