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


Posted in Javascript onDecember 26, 2017

模态框

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("提交");
 });
 
});

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

Javascript 相关文章推荐
解密效果
Jun 23 Javascript
网页常用特效代码整理
Jun 23 Javascript
Ajax,UTF-8还是GB2312 eval 还是execScript
Nov 13 Javascript
仿中关村在线首页弹出式广告插件(jQuery版)
May 03 Javascript
无限树Jquery插件zTree的常用功能特性总结
Sep 11 Javascript
JavaScript将一个数组插入到另一个数组的方法
Mar 19 Javascript
jquery实现下拉框多选方法介绍
Jan 03 Javascript
ionic 自定义弹框效果
Jun 27 Javascript
js实现日期显示的一些操作(实例讲解)
Jul 27 Javascript
使用 Vue-TCB 快速在 Vue 应用中接入云开发的方法
Feb 10 Javascript
es6中new.target的作用和使用场景简单示例分析
Mar 14 Javascript
解决vux 中popup 组件Mask 遮罩在最上层的问题
Nov 03 Javascript
细说webpack源码之compile流程-入口函数run
Dec 26 #Javascript
Vue 进入/离开动画效果
Dec 26 #Javascript
node.js中路由,中间件,ge请求和post请求的参数详解
Dec 26 #Javascript
Angular实现可删除并计算总金额的购物车功能示例
Dec 26 #Javascript
浅谈React深度编程之受控组件与非受控组件
Dec 26 #Javascript
使用vue实现简单键盘的示例(支持移动端和pc端)
Dec 25 #Javascript
vue的一个分页组件的示例代码
Dec 25 #Javascript
You might like
在 PHP 中使用随机数的三个步骤
2006/10/09 PHP
PHP脚本的10个技巧(2)
2006/10/09 PHP
PHP session会话操作技巧小结
2016/09/27 PHP
PHP+Ajax无刷新带进度条图片上传示例
2017/02/08 PHP
PHP pthreads v3下的Volatile简介与使用方法示例
2020/02/21 PHP
懒就要懒到底——鼠标自动点击(含时间判断)
2007/02/20 Javascript
一段效率很高的for循环语句使用方法
2007/08/13 Javascript
js左侧多级菜单动态的解决方案
2010/02/01 Javascript
js监听键盘事件示例代码
2013/07/26 Javascript
echarts3 使用总结(绘制各种图表,地图)
2017/01/05 Javascript
详解JS: reduce方法实现 webpack多文件入口
2017/02/14 Javascript
vue-ajax小封装实例
2017/09/18 Javascript
微信小程序中实现手指缩放图片的示例代码
2018/03/13 Javascript
详解javascript中的babel到底是什么
2018/06/21 Javascript
vue router 组件的高级应用实例代码
2019/04/08 Javascript
vue 实现input表单元素的disabled示例
2019/10/28 Javascript
详解Node.JS模块 process
2020/08/31 Javascript
python实现搜索本地文件信息写入文件的方法
2016/02/22 Python
深入了解Python数据类型之列表
2016/06/24 Python
Python+Pika+RabbitMQ环境部署及实现工作队列的实例教程
2016/06/29 Python
利用Python实现在同一网络中的本地文件共享方法
2018/06/04 Python
华为2019校招笔试题之处理字符串(python版)
2019/06/25 Python
Django中在xadmin中集成DjangoUeditor过程详解
2019/07/24 Python
Python字符串的修改方法实例
2019/12/19 Python
pyinstaller还原python代码过程图解
2020/01/08 Python
如何理解python对象
2020/06/21 Python
解决TensorFlow调用Keras库函数存在的问题
2020/07/06 Python
Python实现冒泡排序算法的完整实例
2020/11/04 Python
意大利网上书店:LaFeltrinelli
2020/06/12 全球购物
企业面试题试卷附带答案
2015/12/20 面试题
vue 中 get / delete 传递数组参数方法
2021/03/23 Vue.js
事业单位请假制度
2014/01/13 职场文书
会计的岗位职责
2014/03/15 职场文书
什么是SOLID
2022/03/24 Javascript
mysql查找连续出现n次以上的数字
2022/05/11 MySQL
flex布局中使用flex-wrap实现换行的项目实践
2022/06/21 HTML / CSS