Wie kann ich ein jQuery-Ereignis erstellen, das das Formular bei einem Doppelklick anzeigt, aber nicht das Doppelklick-Ereignis des Formulars auslöst?

Question

Ich möchte ein Ereignis schreiben, das bewirkt, dass die Zelle mit einem HTML-Formular aktualisiert wird, wenn der Benutzer auf eine Tabellenzelle doppelklickt. Ich möchte nicht, dass das Doppelklick-Ereignis funktioniert, wenn das Formular angezeigt wird. Wenn der Benutzer das Formular durch Klicken auf die Schaltfläche „Abbrechen“ abbricht oder das Formular durch Klicken auf die Schaltfläche „Senden“ absendet, sollte die Tabellenzelle auf den ursprünglichen Wert bzw. den aktualisierten Wert aktualisiert werden und das Doppelklick-Ereignis sollte wieder funktionieren.

Wie implementiert man diese Funktion?

Das ist mein aktueller Code. Wenn Sie auf „Klicken Sie auf mich“ doppelklicken, wird ein Formular angezeigt. Wenn Sie erneut auf das Formular doppelklicken, wird die Formularaktualisierung erneut angezeigt, da das Doppelklick-Ereignis weiterhin ausgelöst wird, während das Formular angezeigt wird.

Wie kann ich ein Doppelklick-Ereignis nur dann auslösen, wenn meine Zelle einen Wert anzeigt, ohne das HTML-Formular anzuzeigen?

Zur Klarstellung: Dies ist eine Zelle, die einen einzelnen Float-Wert speichert. Wenn ich zuerst auf den Wert doppelklicke und dann zum Aktualisieren auf die Schaltfläche „Senden“ oder zum Abbrechen auf die Schaltfläche „Abbrechen“ drücke, wird die Zelle auf ihren ursprünglichen Wert aktualisiert und Sie können erneut auf den Wert doppelklicken.

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>