如何解决jQuery动态生成表格行后仅首行input的id可触发弹窗问题？

嘿，这问题我太熟了！你遇到的是动态元素的事件绑定时机问题：页面加载完成后，你用$('.searchName').keyup(...)给当时存在的输入框绑定了事件，但后续通过jQuery新增的那些.searchName输入框，并没有被这个绑定操作覆盖，所以只有首行的输入框能触发alert，哪怕它们的ID确实是正确设置的。

为什么会这样？ #

jQuery的常规事件绑定（比如.keyup()）只会对绑定时刻已经存在于DOM中的元素生效。动态生成的元素是在绑定之后才被添加到页面的，自然没带上这个事件监听。

两种解决方案 #

方案1：事件委托（推荐，更简洁高效） #

把事件绑定到一个始终存在的父级元素（比如document，或者表格的<tbody>），利用事件冒泡的特性，让父元素来处理子元素的事件。这样不管后续新增多少行，新的输入框触发事件时，都会被父元素捕获到。

修改你的keyup事件绑定代码，替换原来的$('.searchName').keyup(...)：

$(document).on('keyup', '.searchName', function() {
  var id = $(this).attr("id");
  alert(id);
});

方案2：生成元素时直接绑定事件 #

如果你不想用事件委托，也可以在每次生成新行并插入DOM后，单独给新的.searchName输入框绑定事件。这种方式需要调整你的动态行生成逻辑：

$(document).on('keyup', '.lst', function(e) {
  var code = (e.keyCode ? e.keyCode : e.which);
  if (code == 13) {
    count = $('table tr').length;
    html = '<tr>';
    html += '<td align="center">'+ i +'</td>';
    html += '<td><input type="text" class="inputs searchName" size="15" name="pname_' + i + '" id="search'+i+'" /></td>';
    html += '<td><input type="text" class="inputs lst" size="15" /></td>';
    html += '</tr>';
    // 先把新行插入DOM，再获取这个新行的引用
    var newRow = $(html).appendTo('table');
    // 给新行里的.searchName绑定事件
    newRow.find('.searchName').keyup(function() {
      var id = $(this).attr("id");
      alert(id);
    });
    $(this).focus().select();
    i++;
  }
});

完整可运行代码（用方案1） #

我把所有代码整合好了，直接替换你的代码就能用：

<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link type="text/css" href="Bootstrap/bootstrap.css" rel="stylesheet"/>
<title>JSP Page</title>
</head>
<body>
<br><br>
<center>
<div class="container-fluid">
<div class="row">
<div class="col-lg-8">
<div class="table-responsive">
<table class="table-responsive table-bordered">
<thead>
<tr>
<th>No.</th>
<th>Name</th>
<th>Price</th>
</tr>
</thead>
<tbody>
<tr>
<td align="center">1</td>
<td><input type="text" class="inputs searchName" name="pname_1" size="15" id="search1"/></td>
<td><input type="text" class="inputs lst" size="15" /></td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</center>
<script type="text/javascript" src="Bootstrap/jquery-3.1.1.min.js"></script>
<script type="text/javascript" src="Bootstrap/bootstrap.js"></script>
<script type="text/javascript">
$(document).keypress( function(event){
  if (event.which == '13') {
    event.preventDefault();
  }
});
var i = $('table tr').length;
var count=0;
$(document).on('keyup', '.lst', function(e) {
  var code = (e.keyCode ? e.keyCode : e.which);
  if (code == 13) {
    count = $('table tr').length;
    html = '<tr>';
    html += '<td align="center">'+ i +'</td>';
    html += '<td><input type="text" class="inputs searchName" size="15" name="pname_' + i + '" id="search'+i+'" /></td>';
    html += '<td><input type="text" class="inputs lst" size="15" /></td>';
    html += '</tr>';
    $('table').append(html);
    $(this).focus().select();
    i++;
  }
});
$(document).on('keydown', '.inputs', function(e) {
  var code = (e.keyCode ? e.keyCode : e.which);
  if (code==13) {
    var index = $('.inputs').index(this) + 1;
    $('.inputs').eq(index).focus();
  }
});
// 事件委托绑定，处理所有动态生成的.searchName元素
$(document).on('keyup', '.searchName', function() {
  var id=$(this).attr("id");
  alert(id);
});
</script>
</body>
</html>

内容的提问来源于stack exchange，提问作者Saim Khan