如何创建一个jQuery事件，在双击时显示表单，但不触发表单的双击事件？

Question

我想写一个事件，当用户双击表格单元格时，该单元格会用一个HTML表单进行更新。在表单显示的时候，我不希望双击事件起作用。如果用户通过按下取消按钮来取消表单，或者通过按下提交按钮来提交表单，那么表格单元格应该分别更新为原始值或更新后的值，并且双击事件应该再次起作用。

如何实现这个功能？

这是我目前的代码。如果你双击“click me”，你会看到一个表单出现。如果你再次双击表单，你会看到表单再次更新，因为双击事件在表单显示的时候仍然被触发。

我如何只在我的单元格显示值时触发双击事件，而不显示HTML表单。

只是为了澄清，这将是一个存储单个浮点值的单元格，如果我首先双击该值，然后按下提交按钮进行更新，或者按下取消按钮进行取消，那么该单元格将更新为其原始值，然后您可以再次双击该值。

function renderMultEditBox(id, mult) {
  $('#mult_1').html($('#mult_1').html() + '<h2>Title Text</h2><form><input type="text" name="a"><input type="text" name="b"><button type="button"><b>Cancel</b></button>');
}

<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;" id="mult_1" ondblclick="renderMultEditBox(this.innerHTML)">double-click me</td>
  </tr>
</table>

Answer 1

这是我会这样做的。

首先，将表单隐藏在DOM中，这样可以更容易地多次使用它和/或在多个位置使用它。

然后，在单元格上双击时，克隆该表单，移除隐藏类，并将其插入到单元格中。这样它就更像一个模板。

查找jQuery clone 以获取更多信息... 因为您还可以克隆按钮的事件处理程序... 这将减少代码重复。需要再读5分钟才能实现 ;)

$("#tableWithForms td").on("dblclick", function(event){
  let template = $("#formTemplate").clone().removeAttr("id").removeClass("hidden")
  $(this).html(template)
})

.hidden{
  display: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table border="1" id="tableWithForms">
  <tr>
    <td style="text-align: right; cursor: pointer;">双击我</td>
  </tr>
</table>

<!-- 下面使用一个类来隐藏 -->
<div id="formTemplate" class="hidden">
  <h2>标题文本</h2>
  <form>
    <input type="text" name="a">
    <input type="text" name="b">
    <button type="button"><b>提交</b></button>
    <button type="button"><b>取消</b></button>
  </form>
</div>

Answer 2

最简单的方法可能是将表单和表格单元格内容放在单独的 <div> 中，然后可以切换它们的可见性：

$('#mult_1_content').dblclick(function() {
  $('#mult_1_form').show();
  $('#mult_1_content').hide();
});

$('#mult_1_form_cancel').click(function() {
  $('#mult_1_form').hide();
  $('#mult_1_content').show();
});

#mult_1_form {
  display: none;
}

<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;" id="mult_1">
      <div id="mult_1_content">双击我</div>
      <div id="mult_1_form">
        <h2>标题文本</h2>
        <form>
          <input type="text" name="a"><input type="text" name="b">
          <button type="button" id="mult_1_form_cancel"><b>取消</b></button>
        </form>
      </div>
    </td>
  </tr>
</table>