Search code examples
javascriptjquerydatatables

Get ID input value from child row in jquery datatables


Can someone help me, I want to get input value after it's changed or pop an alert warning sign after changing the date input value. so here is my code

// Formatting function for row details - modify as you need
            function format(d) {
                var html =
                    '<td>' +
                    '<input type="date" name="s_date" class="" id="_s_date" data-type="date" data-role="datepicker"></input>' +
                    '<input type="submit" id="_submit" ></input>' +
                    '</td>' +
                    '</tr>' +
                    '</table>' +
                    '</form>';
                // `d` is the original data object for the row
                return (
                    html
                );
            }

$('tbody').on('click', 'td', function(e) {

                var tr = $(this).closest('tr');
                id = $(this).closest('table').attr('id');
                table = $('#' + id).DataTable();
                var row = table.row(tr);
                if (row.child.isShown()) {
                    // This row is already open - close it
                    row.child.hide();
                    tr.removeClass('shown');
                } else {
                    // Open this row
                    row.child(format(row.data(), id)).show();
                    tr.addClass('shown');
                }
            });

$('#_s_date').on('change', 'button[role="button"]', function(e) {
                alert('you change the date');
            });

can anybody helps me with this problem please

I Have tried using

$('#_s_date').on('change', function(){ 
   alert("you are changing the date);
 });

but it is not working.


Solution

  • After calling function format,i think you should recall jquery initiative code block:$(function(){}), and put the code binding event in it,because when you create new elements in function format,the html dom tree has changed,the event handler binding on those elements which jquery can't find again maybe not work,