Использование функции datatable $ .fn.dataTable.ext.search.push с динамическим html

Question

Я не могу заставить функцию работать, если поля min и max еще не существуют на странице

Я использую код, найденный здесь: https://datatables.net/examples/plug-ins/range_filtering.html

Thisработает нормально, если я помещаю его в мою функцию document.ready, и на странице уже есть HTML для полей ввода min и max.Однако, если я загружаю поля min и max динамически, то это не работает.

Мой код выглядит следующим образом:

$("#memList").load("../../js/plugins/stats/mem_list_table.html", function(responseTxt, statusTxt, xhr){

                writeTableHeaders(); 
                writeTableFooters();

                var columns = tableDataColumns();

                var memTable =  $("#mem_list_table").DataTable ({
                    dom: 'rtlip',
                    columnDefs: [
                        { targets: 0, className: "details-control", defaultContent: '', width: 0},
                        { targets: [1,4,7], width: 30},
                        { targets: [2,3], width: 70},
                        { targets: [5], width: 200},
                        { targets: [6], width: 50},
                        { targets: "_all", className: "text-center" }
                    ],
                    destroy: true,
                    scrollY: "500px", // depth of datatable scroll - I'm ysing this to stop the datatable from expanding the panel
                    data: data,
                    bFilter: true, // remove search filter
                    order: [],
                    responsive: true,
                    autoWidth : false,
                    columns: columns,
                    searching: true,
                    paging: true,
                    info: true
                });




                // Apply the filter options
                memTable.columns().every( function (index) {

                    if (index===4) {
                        $(this.footer() ).html( '<input id="min" type="text" placeholder="Min" , class="text-center", style="width:80px" /> <input id="max" type="text" placeholder="Max" , class="text-center", style="width:80px; margin-top:10px"" />' ); 
                    } else if ( index > 0 ) {
                        $(this.footer() ).html( '<input type="text" placeholder="Search" , class="text-center ml-search", style="width:80px" />' );
                    }


                $("#memList").on('keyup', '#min', function () {
                    memTable.draw();
                });



                dfd.resolve("Plugin loaded in modal");
            });

            return dfd.promise();

        };

HTML-код в файле mem_list_table:

<table id="mem_list_table" class="stats_table display table-responsive  cell-border table-hover" style="width:100%; margin-top: 10px;">
    <thead>
        <tr>
        </tr>
    </thead>    
    <tbody>
    </tbody>
</table>

<script>

    $(function() {

        $.fn.dataTable.ext.search.push(
            function( settings, data, dataIndex ) {
                var min = parseInt( $('#min').val(), 10 );
                var max = parseInt( $('#max').val(), 10 );
                var age = parseFloat( data[4] ) || 0; // use data for the age column

                if ( ( isNaN( min ) && isNaN( max ) ) ||
                     ( isNaN( min ) && age <= max ) ||
                     ( min <= age   && isNaN( max ) ) ||
                     ( min <= age   && age <= max ) )
                {
                    return true;
                }
                return false;
            }
        );

});

</script>

Я ценю, что поля min и max еще не находятся в DOM, и я попытался переместить этот код в мой предыдущий блок после того, как поля были записаны в DOM, но все еще не радует.Поэтому я предполагаю, что мой вопрос: как мне обратиться к этим полям в функции и где я должен разместить функцию?