自動完成功能在動態數據輸入表行中不起作用

Question

我創建了一個動態數據輸入表。 我已經向它添加了自動完成功能，但工作正常。但是問題是如果我向動態表中添加了新行，則自動完成功能無法在該行上運行，如何解決呢？

******** ******** HTML

 <table class="table table-bordered" id="curd_table">
            <tr>
                <th width="15%">User ID</th>
                <th width="20%">Name</th>
                <th width="20%">NIC</th>
                <th width="20%">Amount</th>
                <th width="25%">Pay date (YYYY-MM-DD)</th>
                <th></th>
            </tr>
            <tr>
                <td contenteditable="true" class="uid " name="uid" id="uidr"></td>
                <td contenteditable="true" class="name " name="name" id="namer"></td>
                <td contenteditable="true" class="nic" name="nic" id="nicr"></td>
                <td contenteditable="true" class="amount"></td>
                <td contenteditable="true" class="paydate"></td>
                <td></td>
            </tr>
        </table>

**** JS函數****

$(document).ready(function(){
        var count=1;
        $('#add').click(function(){
             count=count+1;
             var html_code ="<tr id='row"+count+"'>";
             html_code +="<td contenteditable='true' class='uid' name='uid' id='uidr'></td>";
             html_code +="<td contenteditable='true' class='name' name='name' id='namer'></td>";
             html_code +="<td contenteditable='true' class='nic' name='nic' id='nicr'></td>";
             html_code +="<td contenteditable='true' class='amount'></td>";
             html_code +="<td contenteditable='true' class='paydate'></td>";
             html_code +="<td><button type='button' name='remove' data-row='row"+count+"' class='btn btn-danger btn-xs remove'>-</button></td>";
             html_code +="</tr>";
             $('#curd_table').append(html_code);

        });


$('#uidr').autocomplete({
            source: function( request, response ) {
                $.ajax({
                    url : '../control/autoComp.php',
                    dataType: "json",
                    method: 'POST',
                    data: {
                        id_startsWith: request.term,
                        type: 'pay_table',
                        row_num : 1
                    },
                    success: function( data ) {
                        response( $.map( data, function( item ) {
                        var code = item.split("|");
                        return {
                            label: code[0],
                            value: code[0],
                            data : item
                            }
                        }));
                    }
                });
            },
            autoFocus: true,
            minLength: 0,
            select: function(event, ui ) {
            var names = ui.item.data.split("|");
            $('#namer').text(names[1]);
            $('#nicr').text(names[2]);
            }
    });
});

自動完成功能無法使用紅色箭頭標記。這些是動態添加的行。

Answer 1

您應該更改您的jquery選擇器以選擇類，而不是id（唯一值）。

並且您錯過了'}）'關閉'$ {document）.ready（function（）{'

編輯：如果動態添加組件，則應使用on（）函數將事件綁定到新添加的組件。

$(document).on('autocomplete','.uid',function(){
        source: function( request, response ) {
            $.ajax({
                url : '../control/autoComp.php',
                dataType: "json",
                method: 'POST',
                data: {
                    id_startsWith: request.term,
                    type: 'pay_table',
                    row_num : 1
                },
                success: function( data ) {
                    response( $.map( data, function( item ) {
                    var code = item.split("|");
                    return {
                        label: code[0],
                        value: code[0],
                        data : item
                        }
                    }));
                }
            });
        },
        autoFocus: true,
        minLength: 0,
        select: function(event, ui ) {
            var names = ui.item.data.split("|");
            $(this).nextAll('.name').text(names[1]);//or just next()
            $(this).nextAll('.nic').text(names[2]);//or just next().next()
        }
});