求助：jQuery DataTables子行日期输入框变更事件无法触发

问题根源 #

1. 动态元素事件绑定错误：子行是点击后动态生成的，页面初始化时#_s_date不存在，直接绑定事件到该元素不会生效，必须用事件委托绑定到已存在的父元素。
2. 重复ID违反HTML规则：每个子行都生成id="_s_date"，ID必须唯一，导致后续子行的输入框无法被正确选中，应改用class标识。
3. 事件绑定目标错误：原代码中第一个绑定的目标是button[role="button"]，和日期输入框完全不匹配。

修正步骤 #

1. 修改子行生成代码（format函数）

将输入框的ID改为class，确保唯一标识同类元素：

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

2. 使用事件委托绑定Change事件

将事件委托到页面初始化时已存在的父元素（比如表格的tbody），监听动态生成的.s_date输入框的change事件：

// 绑定子行日期输入框的change事件
$('tbody').on('change', '.s_date', function(e) {
    // 获取选中的日期值
    var changedDate = $(this).val();
    alert('你修改了日期：' + changedDate);
    // 这里可以添加后续业务逻辑，比如提交日期到后台等
});

3. 优化原有点击事件（可选）

将全局变量id改为局部变量，避免全局污染：

$('tbody').on('click', 'td', function(e) {
    var tr = $(this).closest('tr');
    var id = $(this).closest('table').attr('id'); // 添加var变成局部变量
    var 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');
    }
});

原理说明 #

事件委托利用DOM事件冒泡机制，将事件绑定到静态父元素上，当动态生成的子元素触发事件时，事件会冒泡到父元素，由父元素处理该事件，这样即使子元素后续生成，事件依然能被正确触发。

内容的提问来源于stack exchange，提问作者Luthfi Santosa