我正在尝试为动态表实现一个功能，该表开始如下：
<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和输入，并具有由“ count”变量确定的新ID，因此每个函数调用后，输入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>
为什么这只是第一次而后又没有呢？我在创建的新行上做错了吗？
对不起，我的英语不好，谢谢。
最佳答案
您的keydown功能选择器只会在第一个输入时触发它。您只调用一次.on()，然后将其作为选择器。此时变量'#inp'+String(count)为0，因此它仅适用于ID为count的输入。您可以通过使用适用于所有inp0 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
}
});