jQuery双击编辑防重复提交技巧

子元素置于同一 内，并通过 CSS display 控制可见性。双击事件始终绑定在只读内容容器上（如 #mult_1_content），而表单容器（如 #mult_1_form）本身不响应双击——因为它从不直接监听该事件，且默认隐藏。

✅ 优势：

• 无需手动 on/off 事件，天然规避事件冲突；
• DOM 结构清晰，语义明确，便于后续扩展（如添加提交逻辑、验证等）；
• 性能轻量，无频繁 DOM 重建开销。

以下是完整可运行示例（含取消与基础提交逻辑）：

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<style>
  #mult_1_form { display: none; }
  td { cursor: pointer; text-align: right; }
</style>

<table border="1">
  <tr>
    <td id="mult_1">
      <!-- 只读内容区（双击目标） -->
      <div id="mult_1_content">double-click me</div>
      <!-- 表单编辑区（默认隐藏） -->
      <div id="mult_1_form">
        <h2>Edit Value</h2>
        <form id="editForm">
          &lt;input type=&quot;number&quot; name=&quot;value&quot; step=&quot;0.01&quot; value=&quot;0.00&quot; required&gt;
          <button type="button" id="mult_1_form_cancel">Cancel</button>
          <button type="submit">Submit</button>
        </form>
      </div>
    </td>
  </tr>
</table>

<script>
  // 保存原始值（用于 Cancel 恢复）
  let originalValue = $('#mult_1_content').text();

  // 双击显示表单
  $('#mult_1_content').dblclick(function() {
    const $cell = $(this).closest('td');
    const currentValue = $cell.find('#mult_1_content').text();
    // 预填充表单（支持浮点数）
    $cell.find('input[name="value"]').val(currentValue);
    $cell.find('#mult_1_form').show();
    $cell.find('#mult_1_content').hide();
  });

  // 取消：恢复原始值并切回只读态
  $('#mult_1_form_cancel').click(function() {
    const $cell = $(this).closest('td');
    $cell.find('#mult_1_content').text(originalValue).show();
    $cell.find('#mult_1_form').hide();
  });

  // 提交：更新值并切回只读态
  $('#editForm').submit(function(e) {
    e.preventDefault();
    const $cell = $(this).closest('td');
    const newValue = $(this).find('input[name="value"]').val().trim();
    if (newValue !== '') {
      $cell.find('#mult_1_content').text(newValue).show();
      originalValue = newValue; // 更新原始值快照
    }
    $cell.find('#mult_1_form').hide();
  });
</script>

? 关键注意事项：

• 不要将 ondblclick 写在 HTML 中（如 ondblclick="..."），应统一用 jQuery 绑定，便于集中管理和状态同步；
• 表单内按钮务必设置 type="button"（Cancel）或 type="submit"（Submit），避免默认提交刷新页面；
• 使用 $(this).closest('td') 获取父单元格，确保逻辑与 DOM 层级解耦，利于复用到多行多列场景；
• 若需支持多个可编辑单元格，建议将 id 改为 class 并用数据属性（如 data-field="mult"）标识，配合事件委托提升性能。

此方案简洁、健壮、易扩展，是处理“条件性双击编辑”的最佳实践之一。

本篇关于《jQuery双击编辑防重复提交技巧》的介绍就到此结束啦，但是学无止境，想要了解学习更多关于文章的相关知识，请关注golang学习网公众号！