How can I create a jQuery event that displays the form on double-click, but does not trigger the form's double-click event?

Question

I want to write an event that when the user double-clicks a table cell, the cell is updated with an HTML form. I don't want the double click event to work when the form is displayed. If the user cancels the form by pressing the cancel button, or submits the form by pressing the submit button, the table cell should update to the original value or the updated value respectively, and the double-click event should work again.

How to implement this function?

This is my current code. If you double click "click me" you will see a form appear. If you double-click the form again, you will see the form update again because the double-click event is still fired while the form is displayed.

How can I only trigger the double click event when my cell displays a value without displaying the HTML form.

Just to clarify, this will be a cell that stores a single float value, if I first double click on the value and then press the submit button to update, or the cancel button to cancel, then the cell will update to its original value, and then you can double-click the value again.

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

This is what I would do.

First, hide the form in the DOM, making it easier to use it multiple times and/or in multiple places.

Then, when you double-click on the cell, clone the form, remove the hidden class, and insert it into the cell. This way it works more like a template.

Look up jQuery clone for more information... since you can also clone the button's event handler... this will reduce code duplication. It will take another 5 minutes of reading to achieve it ;)

$("#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

The easiest way is probably to put the form and table cell content in separate <div> and then you can toggle their visibility:

$('#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>