JQuery点击事件在新增表格行中无法触发的问题求助

核心问题分析 #

1. 事件绑定方式错误：原代码直接给初始存在的<tr>绑定点击事件，动态新增的<tr>不会自动继承该事件，需要使用事件委托机制。
2. HTML ID重复：所有行的下拉框、输入框都使用了相同的ID（如recordsNumber、recordsName），违反HTML ID唯一性规则，会导致选择器逻辑混乱。

具体修复步骤 #

• 改用事件委托：将点击事件绑定到始终存在的父元素（如表格的<tbody>），通过指定子元素选择器来触发事件，确保动态新增的行也能响应。
• 替换ID为类名：将重复的ID改为class属性，避免ID冲突，同时保证选择器能正确定位当前行内的元素。
• 优化行号自动递增：新增行时自动计算当前行数，设置正确的行号，提升用户体验。

修复后的完整代码 #

<!DOCTYPE html>
<html>
<head>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
<table id="mytable">
  <thead>
    <tr>
        <th rowspan="2">Line No.</th>
        <th rowspan="2">Record Series Number</th>
        <th rowspan="2">Records Series Name</th>
        <th rowspan="2">Temporary BOX#</th>
        <th rowspan="2">Disposal Date</th>

        <th colspan="2" style="text-align:center">Dates of Record</th>
        <th rowspan="2">Range</th>
        <th rowspan="2">Action</th>
    </tr>
    <tr>
        <th scope="col">From</th>
        <th scope="col">To</th>
    </tr>
  </thead>
  <tbody>
   <tr class="rows">
     <td>1</td>
     <td>
       <select class="recordsNumber">
         <option value="" selected disabled hidden>Choose here</option>
         <option value="CRA AND LPA CASE FILES">MAG-35-01</option>
         <option value="ROLL NUMBER FILES">MAG 59-01</option>
         <option value="HEARING DOCKETS">MAG 59-02</option>
       </select>
     </td>
     <td><input type='text' class='recordsName' value="test" disabled /></td>
     <td><input type='text' class='tempbox' /></td>
     <td><input type='date' class='disposalDate' /></td>
     <td><input type='date' class='from' /> </td>
     <td><input type='date' class='to' /></td>
     <td><input type='text' class='range' maxlength='200' /></td>
     <td><button class='btn btn-danger btn-xs btn-delete'>Delete</button></td>
   </tr>
  </tbody>
</table>

<button type="button" id="replicateButton">replicate</button>
</body>
<script>
  $(document).ready(function() {
    // 使用事件委托绑定点击事件到tbody，确保动态行也能触发
    $("#mytable tbody").on("click", "tr", function () {
      var $dropdown = $(this).find('.recordsNumber');
      var selectedValue = $dropdown.val();
      $(this).find(".recordsName").val(selectedValue);
      $(this).find(".recordsName").prop('title', selectedValue);
    })

    $("#replicateButton").on("click", function () {
      // 计算当前行数，生成新行号
      var rowCount = $("#mytable tbody tr").length + 1;
      var newRow = `<tr class="rows">
        <td>${rowCount}</td>
        <td>
          <select class="recordsNumber">
            <option value="" selected disabled hidden>Choose here</option>
            <option value="CRA AND LPA CASE FILES">MAG-35-01</option>
            <option value="ROLL NUMBER FILES">MAG 59-01</option>
            <option value="HEARING DOCKETS">MAG 59-02</option>
          </select>
        </td>
        <td><input type='text' class='recordsName' value='test' disabled /></td>
        <td><input type='text' class='tempbox' /></td>
        <td><input type='date' class='disposalDate' /></td>
        <td><input type='date' class='from' /> </td>
        <td><input type='date' class='to' /></td>
        <td><input type='text' class='range' maxlength='200' /></td>
        <td><button class='btn btn-danger btn-xs btn-delete'>Delete</button></td>
      </tr>`;
      $("table tbody").append(newRow);
    });
  });
</script>
</html>

额外说明 #

• 事件委托的原理是利用事件冒泡，父元素监听事件后，判断触发事件的子元素是否符合目标选择器，从而执行对应的逻辑，适合处理动态生成的DOM元素。
• 始终保持HTML元素ID的唯一性是前端开发的基础规范，避免因ID冲突导致的选择器错误、JS逻辑异常等问题。

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