如何为DataTables新增行中的元素绑定AutoComplete事件？

我在使用AutoComplete库和带添加行功能的DataTables库时，发现Autocomplete事件仅对页面初始加载的行生效，动态新增的行无法触发该事件。请问如何通过编程方式为动态新增的元素注册事件？我尝试过的代码如下：

$('#addRow').on('click', function () {
    let input = document.createElement("input")
    input.setAttribute("type", "text");
    input.setAttribute("class", "material_no");
    input.setAttribute("id", "material_no");
    input.setAttribute("placeholder", "Enter material no.");

    table.row.add( [
        '-',
        `
        <input type='text' class='material_no' id='material_no' placeholder='Enter Material No.'/>
        `,
        '-',
        '-',
        '-',
        '-',
        '-',
        '-',
        '-',
        '-',
        '-',
    ] ).draw();

    counter++;
} );
// Automatically add a first row of data
$('#addRow').click();

//autocomplete library
$('.material_no').each(function(i, e) {
    $(this).bind('change').autocomplete({
        source: '/mef/suggestions.php',
        change: function( event, ui ) {
            console.log($(this).val())

            console.log(table.row($(this).parent()).index())
            
            return false;
        },
    })
})

问题分析 #

当前代码仅在页面加载时，给已存在的.material_no元素初始化Autocomplete插件。动态新增的元素是在点击事件触发后才创建的，自然没有被绑定插件功能。

解决方案 #

方案1：封装初始化函数，新增行后主动调用

将Autocomplete的初始化逻辑封装成独立函数，每次新增行并完成渲染后，针对新生成的输入框调用该函数：

// 封装Autocomplete初始化逻辑
function initMaterialAutocomplete($el) {
    $el.autocomplete({
        source: '/mef/suggestions.php',
        change: function(event, ui) {
            console.log($(this).val());
            // 用closest('tr')更准确定位当前行，避免嵌套元素影响
            console.log(table.row($(this).closest('tr')).index());
            return false;
        }
    });
}

// 页面加载时初始化现有输入框
$('.material_no').each(function() {
    initMaterialAutocomplete($(this));
});

// 修改新增行的点击事件逻辑
$('#addRow').on('click', function () {
    // 注意：移除重复的id属性，页面中id必须唯一
    table.row.add([
        '-',
        `<input type='text' class='material_no' placeholder='Enter Material No.'/>`,
        '-',
        '-',
        '-',
        '-',
        '-',
        '-',
        '-',
        '-',
        '-'
    ]).draw();

    // 获取刚新增的行，初始化其中的Autocomplete
    const $newInput = table.row(':last').find('.material_no');
    initMaterialAutocomplete($newInput);
    
    counter++;
});

// 自动添加第一行
$('#addRow').click();

关键注意事项

• 不要给多个元素设置相同的id="material_no"，HTML中id属性必须全局唯一，否则会导致选择器定位错误。
• 定位当前行时，推荐使用closest('tr')替代parent()，避免因单元格内嵌套其他元素导致行索引获取错误。

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