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

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

模态框

Bootstrap Modal

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

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

BUG 情景

使用场景

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

简化

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

简书无法展现效果，可参见

代码如下：

点击弹出模态框

One fine body…

取消

提交

$(function() {

$('#modal-click-error').on('click', function() {

$('#myModal').modalhttp://('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("提交");

});

});

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。