我想写一个事件，当用户双击表格单元格时，该单元格会用一个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> 
这是我会这样做的。
首先，将表单隐藏在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>最简单的方法可能是将表单和表格单元格内容放在单独的
<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>