Bagaimanakah saya boleh mencipta acara jQuery yang memaparkan borang pada klik dua kali, tetapi tidak mencetuskan acara klik dua kali borang?

Question

Saya ingin menulis acara yang apabila pengguna mengklik dua kali pada sel jadual, sel itu dikemas kini dengan borang HTML. Saya tidak mahu acara klik dua kali berfungsi apabila borang dipaparkan. Jika pengguna membatalkan borang dengan menekan butang batal, atau menyerahkan borang dengan menekan butang hantar, sel jadual harus mengemas kini kepada nilai asal atau nilai yang dikemas kini masing-masing dan acara klik dua kali akan berfungsi semula.

Bagaimana untuk melaksanakan fungsi ini?

Ini kod semasa saya. Jika anda klik dua kali "klik saya" anda akan melihat borang muncul. Jika anda mengklik dua kali borang itu sekali lagi, anda akan melihat kemas kini borang sekali lagi kerana acara klik dua kali masih dinyalakan semasa borang dipaparkan.

Bagaimana saya boleh mencetuskan acara klik dua kali hanya apabila sel saya memaparkan nilai tanpa memaparkan borang HTML.

Sekadar untuk menjelaskan, ini akan menjadi sel yang menyimpan nilai apungan tunggal, jika saya klik dua kali pada nilai itu dan kemudian tekan butang hantar untuk mengemas kini, atau butang batal untuk membatalkan, maka sel akan mengemas kini kepada nilai asalnya dan anda boleh mengklik dua kali nilai itu sekali lagi.

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

Inilah yang saya akan lakukan.

Mula-mula, sembunyikan borang dalam DOM, menjadikannya lebih mudah untuk menggunakannya beberapa kali dan/atau di beberapa tempat.

Kemudian, apabila anda mengklik dua kali pada sel, klon borang, alih keluar kelas tersembunyi dan masukkan ke dalam sel. Dengan cara ini ia bertindak lebih seperti templat.

Cari jQuery klon untuk maklumat lanjut... kerana anda juga boleh mengklon pengendali acara butang... ini akan mengurangkan pertindihan kod. Perlu 5 minit lagi bacaan untuk capai ;)

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

Cara paling mudah mungkin ialah meletakkan borang dan kandungan sel jadual secara berasingan <div> dan kemudian anda boleh menogol keterlihatannya:

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