Comment puis-je créer un événement jQuery qui affiche le formulaire lors d'un double-clic, mais ne déclenche pas l'événement double-clic du formulaire ?

Question

Je souhaite écrire un événement selon lequel lorsque l'utilisateur double-clique sur une cellule du tableau, la cellule est mise à jour avec un formulaire HTML. Je ne veux pas que l'événement double-clic fonctionne lorsque le formulaire est affiché. Si l'utilisateur annule le formulaire en appuyant sur le bouton Annuler ou soumet le formulaire en appuyant sur le bouton Soumettre, la cellule du tableau doit être mise à jour avec la valeur d'origine ou la valeur mise à jour respectivement, et l'événement de double-clic doit fonctionner à nouveau.

Comment implémenter cette fonction ?

Voici mon code actuel. Si vous double-cliquez sur "cliquez sur moi", vous verrez apparaître un formulaire. Si vous double-cliquez à nouveau sur le formulaire, vous verrez à nouveau le formulaire mis à jour car l'événement de double-clic est toujours déclenché pendant l'affichage du formulaire.

Comment puis-je déclencher un événement double-clic uniquement lorsque ma cellule affiche une valeur sans afficher le formulaire HTML.

Juste pour clarifier, ce sera une cellule qui stocke une seule valeur flottante, si je double-clique d'abord sur la valeur puis que j'appuie sur le bouton Soumettre pour mettre à jour, ou sur le bouton Annuler pour annuler, alors la cellule sera mise à jour à sa valeur d'origine et vous pouvez double-cliquer à nouveau sur la valeur.

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

C'est ce que je ferais.

Tout d'abord, masquez le formulaire dans le DOM, ce qui facilitera son utilisation plusieurs fois et/ou à plusieurs endroits.

Ensuite, lorsque vous double-cliquez sur la cellule, clonez le formulaire, supprimez la classe cachée et insérez-la dans la cellule. De cette façon, il agit davantage comme un modèle.

Recherchez jQuery clone pour plus d'informations... car vous pouvez également cloner le gestionnaire d'événements du bouton... cela réduira la duplication de code. Il faut encore 5 minutes de lecture pour y parvenir ;)

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

Le moyen le plus simple est probablement de séparer le contenu des cellules du formulaire et du tableau <div>, puis de modifier leur visibilité :

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