如何编写适配动态ID的JS函数 解决表格点击仅返回最后行数据问题

问题根因 #

你遇到的是典型的var声明的变量作用域陷阱：

• 用var声明的i、nn变量属于函数作用域，而非块级作用域，循环执行完毕后，nn会被固定为最后一行按钮的选择器
• 所有表单的提交事件触发时，取的都是最终的nn对应的值，自然只会返回最后一行的数据

最优解决方案：用事件委托替代循环绑定 #

完全不需要循环给每个表单绑定事件，也不需要给每个表单/按钮生成唯一ID，代码更简洁，性能也更好：

第一步：简化PHP代码 #

去掉冗余的ID生成，给按钮加统一的类标识，把需要传递的num值存在自定义属性里：

<?php while($data=$query->fetch_assoc()){
    echo "<tr>";
    echo "<td>";
    // 加统一类detail-btn，把num存在data-num属性里
    echo "<button type='button' class='detail-btn' data-num='{$data['num']}'>detail</button>";
    echo "</td>";
    echo "</tr>";
}?>

第二步：改写JS代码，用事件委托绑定事件 #

$(document).ready(function() {
  // 给所有.detail-btn绑定点击事件，后续动态新增的按钮也自动生效
  $(document).on('click', '.detail-btn', function() {
    // 直接取当前点击按钮的data-num值
    const num = $(this).data('num');
    $.ajax({
      type: "POST",
      url: "test.php",
      data: { numb: num },
      dataType: "html",
      success: function(response) {
        $("#container").html(response);
      }
    });
  });
});

原有写法的修复方案 #

如果不想改动PHP代码，只需要把JS里的var声明改成let即可，let是块级作用域，每次循环都会生成独立的变量，不会被后续循环覆盖：

$(document).ready(function() {
  var len = $('[id^=show]').length;
  // 把var i改为let i
  for (let i = 1; i <= len; i++) {
    // 把var nn改为let nn
    let nn = "#numb" + i;
    $("#show" + i).submit(function(e) {
      e.preventDefault();
      $.ajax({
        type: "POST",
        url: "test.php",
        data: {
          numb: $(nn).val()
        },
        dataType: "html",
        success: function(response) {
          $("#container").html(response);
        }
      });
    });
  };
});

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