Get ID input value from child row in jquery datatables

by

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.

  • 1

    IDs must be unique. Since the format function is called for every row, you are clearly violating that rule, with the content you are appending there.

    – 

  • hmm I see, so do you have any solution for it?

    – 

  • Give the elements a class, and use that instead in your selector you use to bind the event handler …?

    – 

  • $('#_s_date').on('change', 'button[role="button"]' – that makes no sense. This would apply to all buttons that are descendants of an element with the ID _s_date– but input elements can’t have descendants in the first place. (And they need no closing tag either, btw.)

    – 

  • thank you for the feedback, I’ll find the another solution for it

    – 

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,

Leave a Comment