欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

Bootstrap 模态框多次显示后台提交多次BUG的解决方法

程序员文章站 2022-05-21 07:53:59
模态框 bootstrap modal bootstrap 的模态框使用bootstrap 的前端应该都接触过。 本文记录一下今天使用时遇到的 bug,以便以后查阅...

模态框

bootstrap modal

bootstrap 的模态框使用bootstrap 的前端应该都接触过。

本文记录一下今天使用时遇到的 bug,以便以后查阅和帮助其他遇到同样问题的伙伴们。

bug 情景

使用场景

触发展现模态框,填写对应的信息,然后 ajax 提交表单信息到后台。

简化

点击下面的按钮一次,弹出模态框。点击提交,会直接 alert("提交") 。点击一次会觉得很正常,但是如果你重复点几次模态框,会发现再次点击 提交 ,alert 会出现多次。

简书无法展现效果,

代码如下:

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

<div class="modal" tabindex="-1" role="dialog" id="mymodal">
 <div class="modal-dialog" role="document">
 <div class="modal-content">
  <div 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>
  </div>
  <div class="modal-body">
  <p>one fine body…</p>
  </div>
  <div class="modal-footer">
  <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
  <button type="button" class="btn btn-primary">提交</button>
  </div>
 </div><!-- /.modal-content -->
 </div><!-- /.modal-dialog -->
</div><!-- /.modal -->
$(function() {

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

问题修复

上述的 js 代码,每次对于按钮的点击都会为提交按钮添加对应事件。修改如下即可:

$(function() {

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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。