Datatables使用jQuery处理折叠项的响应问题

我在我的web项目中使用Datatables库作为标准HTML的替代品，公平地说，它在进行搜索和排序方面非常好

我的问题是，在全屏状态下，我的jQuery和表没有被响应的JS修改，它工作得很好，我的jQuery执行得很好，没有问题，每个人都很高兴。一旦移动设备或中型设备的jQuery脚本崩溃，您可以单击“打开”以直观地展开表和所有元素，这些元素都可用，但我编写的jQuery脚本都不会执行

我认为这与它更改HMTL有关，我不确定如何正确地将其作为执行jQuery代码的目标

我加了一张满桌的图片和一张回应的图片，以显示我对尺寸表示歉意的意思

满满的

响应的

这是我jQuery的一部分，我认为可能是选择器在响应类时没有找到该类

 $('#quotes_table').DataTable({
        stateSave:true,
        "dom": '<"pull-left"f><"pull-right"l>tip',
        "fnDrawCallback":function(){

            $(".action_select").change(function () {
                var text = $(this).val();
                var count = $(this).attr('num');
                var row_id = $("#row_id_" + count).attr('value');
                var name = $("#name_" + count).attr('value');
                var email = $("#email_" + count).attr('value');
                var tel = $("#telnum_" + count).attr('value');
                var house = $("#house_num_" + count).attr('value');
                var desc = $("#request_"+count).attr('value');
                var postcode = $("#postcode_" + count).attr('value');
                if (text == 'accept') {
                    var choice = confirm("Are you sure you want to accept the job?")

                    if (choice == true) {
                        $.ajax({
                            url: "<?php echo base_url();?>jobs/accept_job",
                            type: 'POST',
                            data: {
                                row_id: row_id,
                                name: name,
                                email: email,
                                telnum: tel,
                                house: house,
                                postcode: postcode,
                                desc:desc
                            },
                            success: function () {
                                $(".tbl_row_" + count).css("background-color", "#00CC00");//Green
                                alert("Job Accepted");
                            },
                            error: function () {
                                alert("Error");
                            }
                        })
                    }

                }
                if (text == 'reject') {

$（'quotes_table'）。数据表({
stateSave：没错，
“dom”：“提示”，
“fnDrawCallback”：函数（）{
$（“.action_select”）.change（函数（）{
var text=$（this.val（）；
var count=$（this.attr（'num'）；
var row_id=$（“#row_id_”+count）.attr（'value'）；
变量名称=$（“#名称+计数）.attr（'value'）；
var email=$（“#email#”+count）.attr（'value'）；
var tel=$（“#telnum_uquo+count）.attr（'value'）；
var house=$（“#house_num_uu”+count）.attr（'value'）；
var desc=$（“#请求"+计数）.attr（'value'）；
var postcode=$（“#postcode"+count）.attr（'value'）；
如果（文本==“接受”）{
var choice=confirm（“您确定要接受此作业吗？”）
如果（选项==true）{
$.ajax({
url:“作业/接受作业”，
键入：“POST”，
数据：{
行标识：行标识，
姓名:姓名,，
电邮:电邮,，
电话:，
豪斯：豪斯，
邮政编码：邮政编码，
描述：描述
},
成功：函数（）{
$（“.tbl_row_u”+count）.css（“背景色”，“00CC00”）；//绿色
警报（“接受作业”）；
},
错误：函数（）{
警报（“错误”）；
}
})
}
}
如果（文本==“拒绝”）{

---

提前感谢您的帮助。

您需要使用委托事件处理程序，因为当表响应时，

控件会重新创建

 $('#quotes_table').DataTable({
        stateSave:true,
        "dom": '<"pull-left"f><"pull-right"l>tip',
        "fnDrawCallback":function(){

            $(".action_select").change(function () {
                var text = $(this).val();
                var count = $(this).attr('num');
                var row_id = $("#row_id_" + count).attr('value');
                var name = $("#name_" + count).attr('value');
                var email = $("#email_" + count).attr('value');
                var tel = $("#telnum_" + count).attr('value');
                var house = $("#house_num_" + count).attr('value');
                var desc = $("#request_"+count).attr('value');
                var postcode = $("#postcode_" + count).attr('value');
                if (text == 'accept') {
                    var choice = confirm("Are you sure you want to accept the job?")

                    if (choice == true) {
                        $.ajax({
                            url: "<?php echo base_url();?>jobs/accept_job",
                            type: 'POST',
                            data: {
                                row_id: row_id,
                                name: name,
                                email: email,
                                telnum: tel,
                                house: house,
                                postcode: postcode,
                                desc:desc
                            },
                            success: function () {
                                $(".tbl_row_" + count).css("background-color", "#00CC00");//Green
                                alert("Job Accepted");
                            },
                            error: function () {
                                alert("Error");
                            }
                        })
                    }

                }
                if (text == 'reject') {

另一个问题是您正在

fnDrawCallback

回调函数中添加事件处理程序。它似乎不是放置事件处理程序的最佳位置

我相信您需要按如下方式更改代码：

$('#quotes_table').DataTable({
    stateSave:true,
    "dom": '<"pull-left"f><"pull-right"l>tip',
    // (... skipped ...)
});

// Handle SELECT control change event
$('#quotes_table tbody').on('change', '.action_select', function(e){
   // (... skipped ...)
});

$（'quotes_table'）。数据表({
stateSave：没错，
“dom”：“提示”，
//（…跳过…）
});
//处理选择控件更改事件
$（“#quotes_table tbody”）。在（'change'，'上。操作_select'，函数（e）{
//（…跳过…）
});