Datatables Responsive Issues with jQuery on collapsed items

Question

I am using the Datatables Library in my web project as an alternative to standard HTML and to be fair its pretty nice in terms of having search and ordering on the go.

My issue I'm having is that at full screen my jQuery and the table not being modified by the responsive JS it works fine and my jQuery executes perfectly fine no issues and everyone is happy. Once it collapses for mobile or medium size devices you can click it open to expand the table and all the elements visually there and are usable but none of the jQuery script I've written executes.

i think its something to do with it changing the HMTL and I'm not sure how to target it properly for it to execute the jQuery code.

Ive added an image of the table at full and one at responsive to show what i mean apologies on the size

Full

Responsive

Here is a part of my jQuery, i think it might be the selector not finding the class when its responsive.

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

Thanks for the help in advance.

Answer 1

You need to use delegated event handlers because your <select> controls get recreated when table becomes responsive.

Another problem is that you're adding event handler in fnDrawCallback callback function. It doesn't seem to be the best place to put event handler.

I believe you need to change your code as follows:

$('#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 ...)
});