php Jquery Ajax自动完成以动态添加文本框

Question

我有一个webform，其中表的每一行中的一个字段具有Jquery AutoComplete函数，并且工作正常。 我还通过ajax调用向该表动态添加行。 问题是我似乎无法获得自动完成功能以在动态添加的行（文本框）上工作。 基于谷歌的“全部”，我需要做的是将.autocomplete添加到添加的字段中。 我曾尝试过这种不同的变体，似乎jQuery无法找到要添加的字段？

添加行代码：

$(".btnAddRow").click(function(){
var count = $(this).closest('.AgensDiv').children('.count').val();
var tab = $(this).closest('tr').find('.tab').val();

count++;

$.ajax({
    url: "tblRow.php", 
    type: "POST",
    dataType: "HTML",
    data: {"count": count,
        "tab": tab},
    success: function(result){
        //console.log(result);  
        $("#agensTbl tr:last").before(result);

    }});    
$(this).closest('.AgensDiv').children('.count').val(count);             
});

自动完成代码：

$(".legemiddel" ).autocomplete({
source: function( request, response ) {
    $.ajax({
        url: "AgensSok.php",
        type: "POST",
        dataType: "json",
        data: {"Virkestoff": request.term},
        success: function(data){
            response(data);
            //console.log(data);
        },
        error: function(error){
             console.log("Error:");
             console.log(error);
        }
    });
},
minLength: 3,
select: function( event, ui ) {
    $(this).closest('tr').find('.atc').val(ui.item.id);
    //$("#testAjax").val(ui.item.id);
 },
 open: function() {
   $( this ).removeClass( "ui-corner-all" ).addClass( "ui-corner-top" );
 },
 close: function() {
   $( this ).removeClass( "ui-corner-top" ).addClass( "ui-corner-all" );
 }
});

尝试了添加自动完成功能或仅更改新添加的行中文本框的值的不同变体

$("#agensTbl tr:last").prev().find(".legemiddel").val("popp");

在新添加的和之前更改行的值

$("#agensTbl tr:last").find(".legemiddel").val("popp");

尝试添加自动完成代码不起作用，但是我猜问题出在访问新添加的行。 还尝试为新文本框提供唯一ID以进行测试。 没有成功。

那么，如何访问添加的行成员？ 还是有办法将自动完成功能添加到更高的级别？ （document.body）我希望在类“ legemiddel”上使用autoComplete的textBoxes

Answer 1

因此，我将自动完成代码更改为以下代码，这似乎可行。

$(document).on("keydown.autocomplete", ".legemiddel", function(e){
$(this).autocomplete({
source: function( request, response ) {
    $.ajax({
        url: "AgensSok.php",
        type: "POST",
        dataType: "json",
        data: {"Virkestoff": request.term},
        success: function(data){
            response(data);
            //console.log(data);
        },
        error: function(error){
             console.log("Error:");
             console.log(error);
        }
    });
},
minLength: 3,
select: function( event, ui ) {
    $(this).closest('tr').find('.atc').val(ui.item.id);
    //$("#testAjax").val(ui.item.id);
},
open: function() {
  $( this ).removeClass( "ui-corner-all" ).addClass( "ui-corner-top" );
},
close: function() {
  $( this ).removeClass( "ui-corner-top" ).addClass( "ui-corner-all" );
}
});
});