La boîte modale Bootstrap apparaît plusieurs fois Soumettre un BUG

Cette fois, je vais vous présenter la boîte modale Bootstrap qui apparaît plusieurs fois pour soumettre un bug. Quelles sont les précautions à prendre pour soumettre un bug lorsque la boîte modale Bootstrap apparaît plusieurs fois. Voici un cas pratique, allons-y. jetez un oeil.

Boîte modale

Modal Bootstrap

Vous auriez dû être exposé à la boîte modale de Bootstrap avant d'utiliser le front-end de Bootstrap.

Cet article enregistre le BUG rencontré lors de l'utilisation actuelle afin que nous puissions examiner et aider d'autres partenaires qui rencontreront le même problème à l'avenir.

Scénario de BUG

Scénario d'utilisation

Déclenchez l'affichage de la boîte modale, remplissez les informations correspondantes, puis soumettez les informations du formulaire en arrière-plan via ajax.

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.

【Recommandations vidéo associées : Tutoriel Bootstrap】

Le petit livre ne peut pas montrer l'effet, veuillez voir

Le code est le suivant :

<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() {
 $('#modal-click-error').on('click', function() {
  $('#myModal').modal('show');
  
  $("#myModal .btn-primary").on('click', function() {
   alert("提交");
  });
 });
 
});

Résolution du problème

Le code js ci-dessus ajoutera l' événement correspondant au bouton de soumission à chaque fois que vous cliquerez sur le bouton. Modifiez-le comme suit :

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

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de PHP !

Lecture recommandée :

AngularJS implémente la fonction de calcul de prix

Comment vue-cli configure le terminal mobile lib-flexible+rem Adaptatif

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!