Maison > Article > interface Web > 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 ModalLa 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() { $('#modal-click-error').on('click', function() { $('#myModal').modal('show'); $("#myModal .btn-primary").on('click', function() { alert("提交"); }); }); });Résolution du problèmeLe 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!