Question

我正在尝试为dinamic表实现一个函数，表格如下所示：

<table>
    <thead><tr><th>Código</th><th>Nombre</th><th>Cantidad</th><th>Precio</th></tr></thead>
    <tbody id="bodyVender">
        <tr>
            <td><input id="inp0" type="text" autofocus="true" class="form-control"></td> <td id="tdN0"></td> <td><input id="tdC0" type="text" class="form-control"></td> <td id="tdP0"></td>
        </tr>
    </tbody>
</table>

然后我在调用JQuery函数时向tbody添加更多表行，如下所示：

$('#bodyVender').append('<tr><td><input id="inp'+count+'" type="text" class="form-control"></td> <td id="tdN'+count+'"></td> <td><input id="tdC'+count+'" type="text" class="form-control"></td> <td id="tdP'+count+'"></td></tr>');

如您所见，创建的新行将具有tds和输入，其中新ID由“count”变量确定，因此输入ID可能如下所示：inp0，inp1，inp2在每次函数调用之后。

这是有效的，但这是第一次，即使我正在为新创建的ID调用函数。

我正在使用$（document）.on来调用该函数，我认为这应该适用于创建的新行。

以下是整个代码：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Panel de Administración</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link rel="stylesheet" href="estilo3.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

<script type="text/javascript">
$(document).ready(Principal);

  function Principal(){
  var count = 0;                                                //sell's counter

  $(document).on('keydown','#inp'+String(count), function(e){  //when press key on input with id="inp0"
    if(event.keyCode == 13){                                  //if the key pressed is Enter
      VenderConsulta($(this).val(),count);                   //call function VenderConsulta with the typed code
      }
    });

  function VenderConsulta(Codigo,ntd){
    datos={codigo:Codigo};              // the code to send
    $.ajax({
      url:"bringMeTheData.php",
      type: "POST",
      data: datos,
      success: function(datos){
        console.log(datos);               //i'm recibing something like [{"Nombre":"A product name","P_venta":"990"}]
        count+=1;                         //next time i'll choose the new input with id="inp1"
        $(':focus').blur();               //blur the input
        var arr = JSON.parse(datos);
        var tdNombre = arr[0].Nombre;
        var tdPrecio = arr[0].P_venta;
        $('#tdN'+ntd+'').html(tdNombre);
        $('#tdC'+ntd+'').val(1);
        $('#tdP'+ntd+'').html(tdPrecio);

        $('#bodyVender').append('<tr><td><input id="inp'+count+'" type="text" class="form-control"></td> <td id="tdN'+count+'"></td> <td><input id="tdC'+count+'" type="text" class="form-control"></td> <td id="tdP'+count+'"></td></tr>');

        $('#inp'+count).focus();  //setting focus to the new created input
      }
    });
  }
 }

</script>
</head>

<body>
<div class="container-fluid">
  <section class="tablaVender">
    <div class="row">
      <div class="table-responsive" style="background:white">
        <h3 style="margin-left:15px"> Venta de productos </h3>
        <table class='table table-hover table-bordered'>
          <thead><tr><th>Código</th><th>Nombre</th><th>Cantidad</th><th>Precio</th></tr></thead>
          <tbody id="bodyVender">
            <tr>    <!-- This is the input and i'll add more trs like this in the function VenderConsulta -->
              <td><input id="inp0" type="text" autofocus="true" class="form-control"></td> <td id="tdN0"></td> <td><input id="tdC0" type="text" class="form-control"></td> <td id="tdP0"></td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  </section>
</div>

<script src="http://code.jquery.com/jquery-latest.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</body>
</html>

为什么这只是第一次有效，然后不再有效？我正在错误地创建新行？抱歉，我的英文不好，谢谢。

Answer 1

这是因为这段代码：

$(document).on('keydown','#inp'+String(count), function(e){  //when press key on input with id="inp0"
    if(event.keyCode == 13){                                  //if the key pressed is Enter
        VenderConsulta($(this).val(),count);                   //call function VenderConsulta with the typed code
    }
});

只会执行一次，当它执行时，count的值为0.所以你只是将事件绑定到第一个元素。

相反，你应该使用一个类来定位这些元素。

Answer 2

keydown函数的选择器只会在第一次输入时触发它。您只需拨打.on()一次，然后将'#inp'+String(count)作为选择器。您的变量count此时为0，因此它仅适用于标识为inp0的输入。您可以通过使用适用于所有input[x] ID的选择器来解决此问题。检查id开头的属性选择器可以工作。像：

  $(document).on('keydown','[id^=inp]'function(e){  //when press key on input with id="inp0"
    if(event.keyCode == 13){                                  //if the key pressed is Enter
      VenderConsulta($(this).val(),count);                   //call function VenderConsulta with the typed code
      }
    });

JQuery / Ajax函数不适用于生成的新行

2 个答案: