如何建立一個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>