Cannot access checkbox within responsive modal window

jh_dempsey

I have got the "responsive" add on installed as I want to use the modal window feature of it. I have got the code to successully show the modal window when a row is clicked on, and the modal window basically shows a table of all the data in the row, plus an extra row added at the bottom which adds in a checkbox.

I want to run a script whenever the checkbox is toggled on/off, so I created a .on('change') jquery statement to do this. At the moment, for testing purposes, I'm just trying to get it to display an alert box whenever the checkbox is toggled on/off.

However, the below doesn't work. I get no errors showing in the Microsoft Edge Developer tools, but toggling the checkbox doesn't open up the alert. The HTML code for the checkbox appears to be generated ok as it looks like this in the page source:

<td><form action="#"><input id="approved_chkbox" type="checkbox"></form></td>

Below is the full javascript code which controls my datatable.

var resultTable;

$(document).ready( function () {
    
    resultTable = $('#clash_results').DataTable({
        
        dom: 'Brtip',
        
        ajax: {
            url: 'ajax_get_clash_results.php',
            dataSrc: ''
        },
        
        responsive: {
            details: {
                type: 'column',
                target: 'tr',
                display: $.fn.dataTable.Responsive.display.modal( {
                    header: function ( row ) {
                        var data = row.data();
                        return 'Details for '+data.clash_group_name;
                    }
                } ),
                renderer: function ( api, rowIdx, columns ) {
                    var data = $.map( columns, function ( col, i ) {
                        return '<tr class=\"modal_row\">'+
                                '<td>'+col.title+':'+'</td> '+
                                '<td>'+col.data+'</td>'+
                            '</tr>';
                    } ).join('');
 
                    data = data + '<tr><td>Approved?</td><td><form action=\"#\"><input type=\"checkbox\" id=\"approved_chkbox\"></form></td></tr>';
                    
                    return $('<table/>').append( data );
                }
            }
        },

        columns: [
        { data: 'clash_group_name' },
        { data: 'test' },
        { data: 'cway_side' },
        { data: 'chainage' },
        { data: 'first_appeared', className: 'none' },
        { data: 'last_appeared', className: 'none' },
        { data: 'test_last_run', className: 'none' },
        { data: 'item1_layers', className: 'none' },
        { data: 'item2_layers', className: 'none' },
        { data: 'status' }
        ],  
        
        // Buttons add on used to create buttons that toggle on/off columns and create excel export button
        buttons: [
        {   
            extend: 'excel',
            text: 'Export Results to Excel',
        }],
        
        // This sets the background color of the row depending upon its status
        rowCallback: function(row, data, index) {
        if (data.status == "New") 
        { $(row).css('background-color','#ff9999')}
        else if (data.status == "Active") 
        { $(row).css('background-color','#ffff99')}
        else if (data.status == "Resolved") 
        { $(row).css('background-color','#99ff9c')};
      }
    })
    
    yadcf.init(resultTable, [
     {column_number : 0, filter_type: 'text', filter_container_id: 'filter_clash_group_name'},
     {column_number : 1, filter_type: 'text', filter_container_id: 'filter_test'},
     {column_number : 2, filter_type: 'multi_select', filter_container_id: 'filter_cway_side'},
     {column_number : 3, filter_type: 'range_number_slider', filter_container_id: 'filter_chainage'},
     {column_number : 7, filter_type: 'text', filter_container_id: 'filter_item1_layers'},
     {column_number : 8, filter_type: 'text', filter_container_id: 'filter_item2_layers'},
     {column_number : 9, filter_type: 'multi_select', filter_container_id: 'filter_status'}
        ]);
    
    $('#approved_chkbox').on('change', (function(){        
        window.alert('Changed!');
    }));    
    
}); // End of (document).ready( function ()

Any idea what I'm doing wrong?

jh_dempsey

No worries. Got it working by doing the following

    $("body").change("#approved_chkbox", function () {
    if($("#approved_chkbox").prop('checked'))
    { 
            // Do Stuff
    }
    else 
    { 
            // Do Stuff
    }});