点击Add New按钮时jQuery的.append()为何生成两行重复数据？

安全阿岳

2026-8-22

问题描述

点击Add New按钮时，使用jQuery的.append()方法会生成两行完全相同的表格行，找不到重复执行.append()的原因。改用原生JavaScript实现时无此问题，已在表格末尾添加<tbody>标签用于追加内容，代码片段如下：

$(function() {
  var $formEl  = $('form');
  var $tbodyEl = $('tbody');
  var $tableEl = $('table');

  function onAddProduct(e) {
    e.preventDefault();
    var $pName = $('#pname').val();
    var $pCat = $('#pcat').val();
    var $pPrice = $('#pprice').val();
    $tbodyEl.append(`
                &lt;tr&gt;
                    &lt;td&gt;${$pName}&lt;/td&gt;
                    &lt;td&gt;${$pCat}&lt;/td&gt;
                    &lt;td&gt;${$pPrice}&lt;/td&gt;
                    &lt;td&gt;&lt;button class="deleteBtn"&gt;Delete&lt;/button&gt;&lt;/td&gt;
                &lt;/tr&gt;
                `);
  }

  function onDeleteRow(e) {
    if (!e.target.classList.contains("deleteBtn")) {
      return;
    }

    const btn = e.target;
    btn.closest("tr").remove();
  }

  //formEl.addEventListener("submit", onAddProduct);
  $formEl.on({
    submit: onAddProduct
  });
  //tableEl.addEventListener("click", onDeleteRow);    
  $tableEl.on({
    click: onDeleteRow
  });
});

排查与解决思路

优先检查事件重复绑定
这是jQuery场景下出现重复执行最常见的原因：
- 在onAddProduct函数开头加一行console.log('submit事件触发')，点击按钮后查看控制台是否打印两次。如果是，说明submit事件被绑定了两次。
- 排查根源：页面是否重复引入了jQuery文件？或者代码中是否存在多个$(function() {})代码块，重复绑定了表单的submit事件？比如不小心复制了代码、外部脚本也绑定了同一个表单的提交事件。
优化模板字符串写法（非重复原因，但提升代码规范性）
当前模板里用了<和>转义标签，在ES6模板字符串中可以直接写原生HTML标签，无需转义，修改后代码更清晰：
```
$tbodyEl.append(`
    <tr>
        <td>${$pName}</td>
        <td>${$pCat}</td>
        <td>${$pPrice}</td>
        <td><button class="deleteBtn">Delete</button></td>
    </tr>
`);
```
其他排查方向
- 检查HTML中的<form>标签是否嵌套了另一个<form>，这种嵌套结构可能导致提交事件冒泡触发两次。
- 确认Add New按钮的类型：如果是<button>标签，默认类型为submit，是否存在其他逻辑也触发了表单提交？

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