checkbox click event with jquery datatables not working

Question

I have used jQuery Datatables https://datatables.net/ for my grids. There are two grids, each has a checkbox in the grid. I need to generate an event when checkbox is checked/unchecked.

I have tried this but it doesn't work. Please let me know what I am doing wrong here..........

  $(document).ready(function () {
            $('.cBSAGrid tr td').click(function (event) {
                alert('0'); 
            });
        });

and

 $(document).ready(function () {
            $('#BSAGrid tr').click(function (event) {
                alert('0'); 
            });
        });

My datatable jquery

$.ajax({
                type: "POST",
                url: "/BSA/BSAExceptionGrid",
                data: '{ policynumber: "' + txtpolicy.val() + '",clientname:"' + clientname.val() + '" }',
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                success: function (response) {
                    div.css("display", "none"); 

                    $('#BSAGrid').DataTable({
                        paging: false,
                        searching: false,
                        destroy: true,
                        "bInfo" : false,
                        data: response,
                        columns: [
                            { "data": "Logged_ID" },
                            { "data": "Logged_ID" }, 
                            { "data": "CustomerName" },
                            { "data": "ClientType" }                           

                        ], 
                        aoColumnDefs: [
                        {
                            aTargets: [0],    // Column number which needs to be modified
                            mRender: function (o, v) {   // o, v contains the object and value for the column
                                return '<input type="checkbox" id="chkBSA" name="chkBSA" />';
                            }
                            //,sClass: 'tableCell'       // Optional - class to be applied to this table cell
                        }
                        ,
                         {
                             aTargets: [1],
                             visible: false
                         }
                        ],
                        select: {
                            style: 'os',
                            selector: 'td:first-child'
                        },
                        order: [[1, 'asc']]

                    });

                },
                failure: function (response) {
                    alert(response);
                },
                error: function (response) {
                    alert(response.responseText);
                }
            });

HTML

  <div id="BSAGridContainer" style="display:none;">  
       <table id="BSAGrid" class="cBSAGrid table table-responsive">
            <thead>
                <tr> 
                    <th></th>
                    <th >Logged_ID</th> 
                    <th>Client Name</th>
                    <th>Client Type</th>
                </tr>
            </thead> 
        </table> 
    </div>

do it like this $(document).on("click", ".CHECKBOXCLASS", function() { — Bugfixer
– Bugfixer, Commented Sep 19, 2018 at 12:44
Thank you. That worked. But strangely I put it on Table class i.e. cBSAGrid but it works only for checkbox click and not row click or Is that normal behavior ? — Akshay
– Akshay, Commented Sep 19, 2018 at 12:47
use click event change will only work with checkbox . $(document).on("click", "#BSAGrid tr", function() { alert('click'); }); — Bugfixer
– Bugfixer, Commented Sep 19, 2018 at 12:57

Ali Imran · Accepted Answer · 2018-09-19 12:49:25Z

3

Try bellow code:

$(document).ready(function(){
$(document).on("change", "#chkBSA", function() {
alert('click')
});
});

answered Sep 19, 2018 at 12:49

Ali Imran

6961 gold badge11 silver badges28 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Mauri · Accepted Answer · 2018-09-19 13:50:32Z

0

You could include the onChange event listener in the same column adding this into your column return text onChange="gridCheckboxChange(this);"

answered Sep 19, 2018 at 13:50

Mauri

2472 silver badges6 bronze badges

Comments

Aman · Accepted Answer · 2020-02-20 12:33:27Z

0

If you're using bootstrap 4 custom-checkbox then add a class into your checkbox

.className {left: 0;z-index: 1;width: 1.25rem;height: 1.25rem;}

answered Feb 20, 2020 at 12:33

Aman

112 bronze badges

Collectives™ on Stack Overflow

checkbox click event with jquery datatables not working

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related