Solution au bug de soumission de la boîte modale Bootstrap

Cet article présente principalement la solution aux soumissions multiples de BUG en arrière-plan lorsque la boîte modale Bootstrap s'affiche plusieurs fois. Elle a une certaine valeur de référence. Les amis intéressés peuvent se référer au module

Modal Box

Bootstrap Modal

La boîte modale de Bootstrap aurait dû être exposée au front-end à l'aide de Bootstrap.

Cet article enregistre les bugs rencontrés lors de l'utilisation d'aujourd'hui afin que nous puissions examiner et aider d'autres partenaires qui rencontreraient le même problème à l'avenir.

Scénario de BUG

Scénario d'utilisation

Déclenchez la boîte modale d'affichage, renseignez les informations correspondantes, puis soumettez le informations du formulaire via ajax Allez dans les coulisses.

Simplifier

Cliquez une fois sur le bouton ci-dessous pour faire apparaître la boîte modale. En cliquant sur Soumettre, vous serez alerté("submit") directement. Cliquer dessus une fois semblera normal, mais si vous cliquez plusieurs fois sur la case modale, vous constaterez que lorsque vous cliquez à nouveau sur Soumettre, l'alerte apparaîtra plusieurs fois.

Le livre court ne peut pas afficher l'effet. Vous pouvez vous référer au

code comme suit :

<button class="btn btn-info" id="modal-click-error">点击弹出模态框</button>

<p class="modal" tabindex="-1" role="dialog" id="myModal">
 <p class="modal-dialog" role="document">
 <p class="modal-content">
  <p class="modal-header">
  <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
  <h4 class="modal-title">Modal title</h4>
  </p>
  <p class="modal-body">
  <p>One fine body…</p>
  </p>
  <p class="modal-footer">
  <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
  <button type="button" class="btn btn-primary">提交</button>
  </p>
 </p><!-- /.modal-content -->
 </p><!-- /.modal-dialog -->
</p><!-- /.modal -->
$(function() {

 $(&#39;#modal-click-error&#39;).on(&#39;click&#39;, function() {
  $(&#39;#myModal&#39;).modal(&#39;show&#39;);
  
  $("#myModal .btn-primary").on(&#39;click&#39;, function() {
   alert("提交");
  });
 });
 
});

Résolution du problème

Le code js ci-dessus. , pour le bouton à chaque fois, cliquer ajoutera les événements correspondants au bouton de soumission. Modifiez-le simplement comme suit :

$(function() {

 $('#modal-click-error').on('click', function() {
  $('#myModal').modal('show');
 });
 
 $("#myModal .btn-primary").on('click', function() {
  alert("提交");
 });
 
});

Ce qui précède est ce que j'ai compilé pour tout le monde. J'espère que cela sera utile à tout le monde à l'avenir.

Articles connexes :

Problèmes liés à la transmission de valeurs dans layui

Comment implémenter un système de loterie à l'aide de JavaScript

Réponse détaillée : Quel impact les changements de vue ont-ils sur les composants ?

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!