Question

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

<form id="forma2">          
    <table id="prodItems" class="table table-hover table-bordered" style="width:100%">

              <!-- ENCABEZADOS -->
                  <thead>
                    <tr>
                     <th style="width:8%">Partida</th>
                      <th style="width:8%" >Cantidad</th>
                      <th style="width:15%">Modelo</th>
                      <th style="width:15%">S/N</th>
                      <th style="width:70%">Descripcion</th>
                      <th style="width:3%">Check</th>
                    </tr>
                  </thead>
                  <!-- FIN ENCABEZADOS -->
                  <!-- INGRESO DE DATOS DE PRODUCTOS -->
                  <tbody>
                    <tr>
                     <td>1</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>
                  </tbody>
                  <!-- FIN  INGRESO DE DATOS DE PRODUCTOS -->
            </table>
        <!-- FIN TABLA -->

                <!-- BOTONES APP--> 
                <input id="crearNuevo" type="button" class="nuevo" value="Crear Nueva">
                <button type="button" class="agregar">Agregar Campos</button>
                <button type="button" class="borrar">Eliminar Campos</button>
                <input type="reset" class ="reiniciar "name="reset" id="button" value="Restablecer Campos" />
                <input id="enviarDatos" type="button" class="guardar" value="Guardar">
                <!-- FIN BOTONES APP -->
                <p>
                <div class="enviartodo">
                        <div class="confirmacion"></div>        
                 </div>
</form>

我正在使用jQuery：

- 在表格中添加新行（It's Works） -Delete row（It's Works） - 完成输入文本“Modelo”（它的工作原理） - 使用“Modelo”（It's Works）中的查询完成输入文本“Descripcion”

$(function() {

    $(".autocompletModelo").unbind().autocomplete({
        source: "auto-modelo.php",
        minLength: 2,
        autoFocus: true
    });
 
$(".autocompletModelo").focusout(function(){
        $.ajax({
            url:'auto-descripcion.php',
            type:'POST',
            dataType:'json',
            data:{ modelo:$('.autocompletModelo').val()}
        }).done(function(respuesta){
            $("#descripcion").val(respuesta.descripcion);});
    });
});

// FIN AUTOCOMPLETAR MODELO - DESCRIPCION 


//FUNCION AUTOCOMPLETAR CLIENTES

$(function() {
    
    $("#empresa").autocomplete({
        source: "auto-clientes.php",
        minLength: 2 
    });                
});

// FIN FUNCION AUTOCOMPLETAR CLIENTES

$(function() {
    var count = 1;
 	
   $(".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);
   });
  
   $(".borrar").on('click', function() {
		$('.check:checkbox:checked').parents("tr").remove();
       
										});
   
});

问题是表中只能使用de First Row。如果我需要尝试添加新行，则自动完成不起作用：S。

有些想法？

谢谢你。

Answer 1

问题是您的新行是动态生成的，所以当您第一次绑定autocomplete时，focusout这些行不存在。

所以解决方案很简单：在创建每一行后绑定autocomplete和focusout。你可以用这个替换你的添加功能：

$(".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);});
          });
      });           
});

以下是JSFidlle的示例。

Answer 2

试试这个：

$(".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
        });
    });

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

2 个答案: