折叠项目 jQuery 的数据表响应问题

Question

我在我的 Web 项目中使用 Datatables 库作为标准 HTML 的替代品，并且公平地说，它在移动搜索和订购方面相当不错。

我遇到的问题是，在全屏模式下，我的 jQuery 和 table 没有被响应式 JS 修改，它工作正常，我的 jQuery 执行得很好否问题，每个人都很高兴。一旦它为移动或中型设备折叠，您可以单击它打开以展开 table 并且所有元素都在视觉上并且可用但是我编写的 jQuery 脚本的 none 执行.

我认为这与更改 HMTL 有关，我不确定如何正确定位它以使其执行 jQuery 代码。

我添加了一张 table 的完整图片和一张响应式的图片，以表明我对尺寸表示歉意

已满

响应

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

 $('#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

您需要使用委托事件处理程序，因为当 table 响应时您的 <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 的数据表响应问题

Datatables Responsive Issues with jQuery on collapsed items

html

jquery

datatables