如何编写jQuery双击事件：显示表单时禁用事件，操作后恢复

要解决你遇到的重复生成表单问题，你可以通过标记编辑状态、控制事件触发时机来实现，以下是完整的修复方案：

解决思路 #

• 给单元格加个编辑状态标记，只有当单元格没在编辑时才响应双击
• 提前保存单元格的原始内容，取消编辑时直接恢复
• 编辑过程中屏蔽双击事件，完成编辑后重新启用

完整代码实现 #

HTML #

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table border="1">
  <tr>
    <td style="text-align: right; cursor: pointer;" class="editable-cell" id="mult_1">double-click me</td>
  </tr>
</table>

JavaScript #

$(function() {
  // 给可编辑单元格绑定双击事件
  $('.editable-cell').on('dblclick', function() {
    const $cell = $(this);
    // 如果已经在编辑状态，直接跳过
    if ($cell.hasClass('editing')) return;

    // 保存单元格的原始内容
    const originalContent = $cell.text().trim();
    // 标记为编辑状态
    $cell.addClass('editing');

    // 组装表单HTML
    const formContent = `
      <h2>Title Text</h2>
      <form class="edit-form">
        <input type="text" name="a" placeholder="输入值A">
        <input type="text" name="b" placeholder="输入值B">
        <button type="button" class="cancel-btn"><b>Cancel</b></button>
        <button type="button" class="submit-btn"><b>Submit</b></button>
      </form>
    `;
    // 替换单元格内容为表单
    $cell.html(formContent);

    // 取消按钮逻辑
    $cell.find('.cancel-btn').click(function() {
      // 恢复原始内容
      $cell.text(originalContent);
      // 移除编辑标记，恢复双击事件
      $cell.removeClass('editing');
    });

    // 提交按钮逻辑
    $cell.find('.submit-btn').click(function() {
      // 获取输入框的值（可根据需求自定义处理逻辑）
      const valA = $cell.find('input[name="a"]').val().trim();
      const valB = $cell.find('input[name="b"]').val().trim();
      // 生成要显示的新内容，这里示例为合并两个输入值
      const newContent = valA && valB ? `${valA} | ${valB}` : originalContent;
      // 更新单元格内容
      $cell.text(newContent);
      // 移除编辑标记，恢复双击事件
      $cell.removeClass('editing');
    });
  });
});

重点解释 #

• 编辑状态标记：通过editing类判断当前单元格是否在编辑，双击事件触发时先检查这个类，存在就不执行后续代码，从根源避免重复生成表单
• 原始内容保存：进入编辑前把单元格的文本存下来，取消时直接还原，不用额外操作DOM
• 事件控制：不用手动解绑/绑定双击事件，靠状态类判断就足够简洁，避免事件管理混乱

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