问题描述:
在Tab中点击新增按钮,弹出一个window窗口,窗口中表单数据填写完成后点击提交保存按钮会提交两次数据,如果刷新整个页面,重复上面步骤只会提交一次数据。如果关闭Tab子选项卡,重复之前步骤有会提交两次数据,再次关闭Tab子选项卡,重复之前步骤有会提交三次数据。
问题分析:
window窗口是通过html方式创建的,里面嵌套了一个form表单,该window窗口默认是隐藏的,通过js打开该窗口。当打开Tab子选项卡时,虽然该window窗口是隐藏的,但窗口的html元素已经生成了,且都加了display:none属性。当直接关闭Tab子选项卡时子选项卡的html元素会被销毁删除,但是window窗口的html元素不会被销毁删除,依旧保持不变。当再次打开Tab子选项卡时又会生成window窗口的html元素,这样就会出现两个相同的窗口元素,当填好表单数据并点击提交时就会触发两次onClick事件。
解决方案:
为tabs添加onClose事件,当检测到子选项卡关闭的时候通过destroy方法销毁window窗口的html元素。
$('#tabs').tabs({
onClose: function(title,index){
$("#win").window('destroy');
}
});