bootstrap模态框通过传值解决重复提交问题
自己通过模态框确认是否提交的功能时,总是重复提价上次的请求。
原因:重复的原因是jquery通过id绑定了确定按钮的onclick事件,所以每次提交都会增加 一次绑定(没有清除上次的绑定),才造成了重复提交,因此这一次不再绑定,通过传参的方式解决问题(就是把参数和方法一起传过去赋值)。
通过按钮属性显示不同内容
当有一堆按钮,都要触发相同的模态框(如:向好友列表中某个人发消息),只是有用户ID不同,那么可以使用data-whatever配合event.relatedtarget来实现:
//要调用的函数: function run_task(id){ $.post("mrTask/runTask",{id:id},function(res){ if("success"==res){ layer.msg('已加入运行队列', {icon: 1}); }else{ layer.msg('运行失败', {icon: 5}); } }); } //点击的按钮以及传递的参数 <li><a href="#" data-whatever="run_task('+row.id+')*run" data-toggle="modal" data-target="#myModal_confirm">手动运行</a></li> <!-- 统一模态框 --提示--> <div class="modal fade" id="myModal_confirm" tabindex="-1" role="dialog" aria-labelledby="myModalLabel_confirm" aria-hidden="true"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true">× </button> <h4 class="modal-title" id="myModalLabel_confirm"> 信息提示 </h4> </div> <div class="modal-body" id="show_div_confirm"> ... </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">关闭 </button> <button type="button" class="btn btn-primary" data-dismiss="modal" id="domodal">确定</button> </div> </div><!-- /.modal-content --> </div><!-- /.modal-dialog --> </div> //js <script type="text/javascript"> $('#myModal_confirm').on('show.bs.modal', function (event) { var button = $(event.relatedTarget) // 触发事件的按钮 var recipient = button.data('whatever') // 解析出data-whatever内容 var modal = $(this) var params =recipient.split("*"); var msg =""; if("del"==params[1]){ msg="是否删除数据?"; }else if("run"==params[1]){ msg="是否手动运行程序?"; } modal.find('#domodal').attr("onclick",params[0]); modal.find('.modal-body').text(msg); }) </script>