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 相关文章推荐
jQuery Validate表单验证深入学习
Dec 18 Javascript
JavaScript时间操作之年月日星期级联操作
Jan 15 Javascript
浅谈js的url解析函数封装
Jun 28 Javascript
举例讲解jQuery对DOM元素的向上遍历、向下遍历和水平遍历
Jul 07 Javascript
JS实现简单的tab切换选项卡效果
Sep 21 Javascript
jQuery实现的背景颜色渐变动画效果示例
Mar 24 jQuery
理解Angular的providers给Http添加默认headers
Jul 04 Javascript
vue组件生命周期详解
Nov 07 Javascript
JavaScript实现简单音乐播放器
Apr 17 Javascript
微信小程序如何获取用户收货地址
Nov 27 Javascript
JS实现简单随机3D骰子
Oct 24 Javascript
详解Angular Karma测试的持续集成实践
Nov 15 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+SqlServer实现分页显示
2006/10/09 PHP
转PHP手册及PHP编程标准
2006/12/17 PHP
apache+codeigniter 通过.htcaccess做动态二级域名解析
2012/07/01 PHP
使用PHP备份MYSQL数据的多种方法
2014/01/15 PHP
浅谈php中include文件变量作用域
2015/06/18 PHP
分享50个提高PHP执行效率的技巧
2015/12/26 PHP
THREE.JS入门教程(4)创建粒子系统
2013/01/24 Javascript
js 文本滚动效果的实例代码
2013/08/17 Javascript
通过pjax实现无刷新翻页(兼容新版jquery)
2014/01/31 Javascript
node.js学习总结之调式代码的方法
2014/06/25 Javascript
深入理解JavaScript中的尾调用(Tail Call)
2017/02/07 Javascript
input框中自动展示当前日期yyyy/mm/dd的实现方法
2017/07/06 Javascript
关于TypeScript中import JSON的正确姿势详解
2017/07/25 Javascript
JS实现瀑布流布局
2017/10/21 Javascript
js指定日期增加指定月份的实现方法
2018/12/19 Javascript
vue框架制作购物车小球动画效果实例代码
2019/09/26 Javascript
关于vue2强制刷新,解决页面不会重新渲染的问题
2019/10/29 Javascript
微信小程序学习之自定义滚动弹窗
2020/12/20 Javascript
[40:12]Liquid vs Chaos 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/16 DOTA
使用python脚本实现查询火车票工具
2018/07/19 Python
对python中Json与object转化的方法详解
2018/12/31 Python
PyQt 实现使窗口中的元素跟随窗口大小的变化而变化
2019/06/18 Python
python实现将文件夹内的每张图片批量分割成多张
2019/07/22 Python
Python爬虫爬取煎蛋网图片代码实例
2019/12/16 Python
查看端口并杀进程python脚本代码
2019/12/17 Python
Python中if有多个条件处理方法
2020/02/26 Python
python用Tkinter做自己的中文代码编辑器
2020/09/07 Python
HTML5的download属性详细介绍和使用实例
2014/04/23 HTML / CSS
美国宠物用品网站:Value Pet Supplies
2018/03/17 全球购物
Unix/Linux开发面试题
2016/08/16 面试题
2016年大学自主招生自荐信范文
2015/03/24 职场文书
首次购房证明
2015/06/19 职场文书
golang协程池模拟实现群发邮件功能
2021/05/02 Golang
如何使用pdb进行Python调试
2021/06/30 Python
Java9新特性之Module模块化编程示例演绎
2022/03/16 Java/Android
浅谈Node的内存泄露问题
2022/05/06 NodeJs