Javascript 自动完成动态表单（jQuery）-所有输入文本的同一类

我正在使用以下代码（HTML表单）：

帕蒂达
康蒂达
摩洛
序列号
描述
检查
1.
阿格雷加坎波斯酒店
伊莱米纳坎波斯

我使用jQuery来：

-向表中添加新行（它的工作方式） -删除行（它的工作） -自动完成输入文本“Modelo”（它的作品） -使用来自“Modelo”的查询自动完成输入文本“descripion”（它的作品）

$（函数（）{
$（“.autocompletModelo”）.unbind（）.autocomplete({
来源：“auto modelo.php”，
最小长度：2，
自动对焦：正确
});
$（“.autocompletModelo”）.focusout（函数（）{
$.ajax({
url:'auto-descripion.php'，
类型：'POST'，
数据类型：'json'，
数据：{modelo:$（'.autocompletModelo'）.val（）}
}).完成（功能（respuesta）{
$（“#descripion”）.val（respuesta.descripion）；}）；
});
});
//FIN自动完成模式-描述
//功能自动完成客户端
$（函数（）{
$（“#empresa”）。自动完成({
来源：“auto clientes.php”，
最小长度：2
});                
});
//FIN函数自动完成客户端
$（函数（）{
var计数=1；
$（“.agregar”）。在（“单击”，函数（）{
计数++；
newRow=''+计数+''；
$（'#prodItems tr'）.last（）.after（newRow）；
});
$（“.borrar”）。在（'click'，function（）上{
$（'.check:checkbox:checked'）.parents（“tr”）.remove（）；
});
});

问题在于新行是动态生成的，因此在您第一次绑定

自动完成

和

聚焦输出

时，这些行不存在

因此，解决方案很简单：在创建每一行后绑定

自动完成

和

聚焦输出

。您可以用以下函数替换add函数：

$(".agregar").on("click",function() {  
      count++;
      newRow = $('<tr><td>'+count+'</td><td><div class="form-group"><input class="form-control" name="n_cantidad" id="cantidad" maxlength="5" placeholder="#"/></div></td> <td><div class="form-group"><input class="form-control autocompletModelo" name="n_modelo" id="modelo" maxlength="20" placeholder="XXX-XX" type="text"></div></td> <td><div class="form-group"><input class="form-control" name="n_serie" id="serie" maxlength="20" placeholder="12345"/></div></td> <td><div class="form-group"><textarea class="form-control" rows="2" name="n_descripcion" id="descripcion" maxlength="300" placeholder="Descripcion del Material"/></textarea></div></td><td><div class="form-group"><input type="checkbox" class="check"/></div></td></tr>');
      $('#prodItems tr').last().after(newRow)

      newRow.find(".autocompletModelo").autocomplete({
          source: "auto-modelo.php",
          minLength: 2,
          autoFocus: true
      }).focusout(function(){
          $.ajax({
                url:'auto-descripcion.php',
                type:'POST',
                dataType:'json',
                data:{ modelo:$('.autocompletModelo').val()}
          }).done(function(respuesta){
                $(this).parents("tr").find("#descripcion").val(respuesta.descripcion);});
          });
      });           
});

$（“.agregar”）。在（“单击”，函数（）{
计数++；
新行=$（''+计数+''）；
$（'#prodItems tr'）.last（）.after（newRow）
newRow.find（“.autocomplettmodelo”）.autocomplete({
来源：“auto modelo.php”，
最小长度：2，
自动对焦：正确
}).focusout（函数（）{
$.ajax({
url:'auto-descripion.php'，
类型：'POST'，
数据类型：'json'，
数据：{modelo:$（'.autocompletModelo'）.val（）}
}).完成（功能（respuesta）{
$（this.parents（“tr”）.find（“descripion”）.val（respuesta.descripion）；}）；
});
});           
});

下面是一个例子。

试试这个：

$(".agregar").on("click",function() {  
        count++;
        newRow = '<tr><td>'+count+'</td><td><div class="form-group"><input class="form-control" name="n_cantidad" id="cantidad" maxlength="5" placeholder="#"/></div></td> <td><div class="form-group"><input class="form-control autocompletModelo" name="n_modelo" id="modelo" maxlength="20" placeholder="XXX-XX" type="text"></div></td> <td><div class="form-group"><input class="form-control" name="n_serie" id="serie" maxlength="20" placeholder="12345"/></div></td> <td><div class="form-group"><textarea class="form-control" rows="2" name="n_descripcion" id="descripcion" maxlength="300" placeholder="Descripcion del Material"/></textarea></div></td><td><div class="form-group"><input type="checkbox" class="check"/></div></td></tr>';
        $('#prodItems tr').last().after(newRow);
        $('.autocompletModelo', newRow).autocomplete({
            source: "auto-modelo.php",
            minLength: 2,
            autoFocus: true
        });
    });

$（“.agregar”）。在（“单击”，函数（）{
计数++；
newRow=''+计数+''；
$（'#prodItems tr'）.last（）.after（newRow）；
$（'.autocompletModelo'，newRow）.autocomplete({
来源：“auto modelo.php”，
最小长度：2，
自动对焦：正确
});
});

只是一个简短的评论：没有必要用

$（function（）{}）

来包装每个函数，只需用它来包装它们。你能给我一个例子吗？请看一下我答案上的JSFIDLE。所有函数都包装在一个唯一的<代码>$（函数（）{}）完成后，所有函数都包装在一个唯一的$（函数（）{}）中。我会再试一次。同样的结果，伙计，只适用于第一排。第二行加载自动完成功能失败。我正在尝试使用该示例，但无法在我的服务器上运行：（.我不明白发生了什么..这很有效，伙计！但我需要像第一行一样将每个描述添加到每个模型中。我已经更新了我的答案。使用前面解释的相同想法，您可以再次绑定焦点。重要提示：添加新行将创建重复的

ID

元素，请将它们更改为

类

并相应地编辑代码。

Ìds

应该是唯一的。