我想寫一個事件，當使用者雙擊表格單元格時，該單元格會用一個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>