复选框单击时的 Jquery 和 Datatables 调用函数不起作用

问题描述

我有以下数据表脚本工作。单击复选框时，我需要另一个脚本函数来激活。这不起作用，有谁知道我做错了什么？我检查了控制台，没有发送任何帖子，也没有错误日志。

数据表脚本

<script type="text/javascript">
    var checkCol = 4; //checkBox column
    $(document).ready(function () {
        $('#accountTable').dataTable({
            rowId: 'id',"processing": true,select: true,"ajax": "selectdatatable_allacc.PHP","columns": [
                {
                    data: 'name'
                },{
                    data: 'email'
                },{
                    data: 'password'
                },{
                    data: 'rang'
                },{
                    data: 'do_lead'
                },{
                    data: 'notes',render: function (data,type,row,Meta) {
                        return '<font color=' + row.cat_color + '>' + data + '</font>';
                    }
                },{
                    'data': null,title: 'Dead',wrap: true,"render": function (item) {
                        return '<input type="submit" value="Dead" style="width:57px !important;" class="example_e" onClick="mobreset(' +
                            item.id + ') "/>'
                    }
                },title: 'Login',"render": function (item) {
                        return '<input type="submit" value="Login" style="width:57px !important;" class="example_e" onClick="mobLogin(' +
                            item.id + ') "/>'
                    }
                },title: 'Action 2',"render": function (item) {
                        return '<input type="button" value=" Edit " id= ' + item.id +
                            ' style="width:57px !important;" class="example_c edit_data" />'
                    }
                },],columnDefs: [{
                    targets: [checkCol],row) {
                        if (type ===
                            'display') { //if column data is 1 then set attr to checked,use row id as input id (plus prefix)
                            return '<input type="checkBox" ' + ((data == 1) ? 'checked' : '') +
                                ' value="' + row.id + '" class="active" />';
                        }
                        return data;
                    },className: "dt-body-center"
                },{
                    targets: 0,select: {
                style: 'os',selector: 'td:not(:nth-child(2))'
            },});
    });
</script>

复选框被选中或未选中时调用的脚本

<script type="text/javascript">
    $(document).ready(function () {
        $("input.active").click(function () {
            // store the values from the form checkBox,then send via ajax below
            var check_active = $(this).is(':checked') ? 1 : 0;
            var check_id = $(this).attr('value');

            $.ajax({
                type: "POST",url: "dolead.PHP",data: {
                    id: check_id,active: check_active
                },});
            return true;
        });

    });
</script>

解决方法

您可以尝试使用 jquery on 函数来完成这项工作

<script type="text/javascript">
    $(document).ready(function () {
        $("#accountTable").on("click","input.active",function () { // notice the on function
            // store the values from the form checkbox,then send via ajax below

            console.log("checkbox clicked"); // to check if the event is working

            var check_active = $(this).is(':checked') ? 1 : 0;
            var check_id = $(this).attr('value');

            $.ajax({
                type: "POST",url: "dolead.php",data: {
                    id: check_id,active: check_active
                },});
            return true;
        });

    });
</script>