Question

我在我的网站项目中使用Datatables Library作为标准HTML的替代品，并且在移动搜索和订购方面非常好。

我遇到的问题是全屏我的jQuery和表没有被响应式JS修改它工作正常我的jQuery执行完全没问题，每个人都很高兴。一旦它崩溃为移动或中型设备，您可以单击它打开以在那里展开表格和所有元素，并且可用，但我写的jQuery脚本都没有执行。

我认为它与改变HMTL有关，我不确定如何正确地定位它来执行jQuery代码。

我已经完整地添加了一张桌子的图像，并且响应于显示我的意思是大小的道歉

完整

table at full

响应

Responsive table

这是我的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') {

感谢您的帮助。

Answer 1

您需要使用委派的事件处理程序，因为当表变为响应时，会重新创建<select>控件。

另一个问题是您在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 ...)
});

数据表对崩溃项目的jQuery的响应性问题

1 个答案: