jquery 如何为新元素绑定事件?

hsgswve4  于 2023-08-04  发布在  jQuery
关注(0)|答案(1)|浏览(106)

如何以编程方式为新元素注册事件?我正在使用自动完成库和数据表库(添加行功能),自动完成事件仅应用于现有行,但不适用于新插入的行。我该怎么补救?请帮帮我...
这就是我所尝试的...

$('#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;
            },
        })
    })

字符串

t1qtbnec

t1qtbnec1#

我通过将event放入datatable中的draw函数来解决这个问题。我不知道这是否是一个好的方法,或者将来会导致错误。

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

                    console.log(table.row($(this).parent()).index())
                    

                    // $.ajax({
                    //     url: '/mef/ajax/part_names.php',
                    //     method: 'POST',
                    //     data: { part_code: $(this).val()},
                    //     success: data => {
                    //         $(`td:eq(${i})`).html(data)
                    //         console.log(data)
                    //     },
                    //     error: err => console.log(err)
                    // })
                    
                    
                    return false;
                },
            })
        })
    });

字符串

相关问题