问题
新开一个tab,操作一个dialog功能正常,确认和取消都正常,关闭tab,重新打开tab,操作dialog,确定和取消功能都不正常了.代码
打开tab的代码
openTabs = function (path, title) {
if ($('#home').tabs('exists', title)) {
$('#home').tabs('select', title);
} else {
$('#home').tabs('add', {
title: title,
href: path,
closable: true
});
}
}
openTabs('/index.php/PhoneRec/store.html','电话');打开dialog的代码
$("#PhoneRec_dialog").dialog({
title: '编辑',
width: 700,
height: 520,
resizable: true,
modal:true,
href: '/index.php/PhoneRec/edit/id/' + id,
buttons: [{
text: "修改",
iconCls: "icon-edit",
handler: function () {
if ($('#PhoneRec_edit').form('validate')) {
$.ajax({
url: '/index.php/PhoneRec/edit/id/' + id,
type: 'post',
data: {
Customer_Name: $("#PhoneRec_edit input[name='Customer_Name']").val(),
Phone_time: $("#PhoneRec_edit input#Phone_time").val(),
Copy_Contact: $("#PhoneRec_edit input#Copy_Contact").val(),
Tel: $("#PhoneRec_edit input#Tel").val(),
Phone_Content: $("#PhoneRec_edit textarea#Phone_Content").val(),
PreTail: $("#PhoneRec_edit input[name='PreTail']").val(),
Memo: $("#PhoneRec_edit textarea#Memo").val(),
Memo_old: $("#PhoneRec_edit textarea#Memo_old").val(),
Isgathering: $("#PhoneRec_edit input[name = 'Isgathering']").val(),
IsDail: $("#PhoneRec_edit input[name='IsDail']").val(),
},
beforeSend: function () {
$.messager.progress({
text: '正在修改电话记录。。。。'
})
},
success: function (data, response, status) {
$.messager.progress('close');
if (data == 1) {
$.messager.show({
title: '提示',
msg: '修改记录成功'
});
$("#PhoneRec_dialog").dialog('close');
$('#PhoneRec_data').datagrid('reload');
} else {
$.messager.alert('修改记录失败', data, 'warning');
}
}
})
}
}
}, {
text: "取消",
iconCls: "icon-redo",
handler: function () {
$("#PhoneRec_dialog").dialog("close");
$("#PhoneRec_edit").form("reset");
}
}]
})感谢@kikong 的帮助,在他给出的测试代码中,我修改出符合我项目的代码
easyui_tab.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Title</title>
<link rel="stylesheet" type="text/css" href="jquery-easyui-1.4.4/themes/default/easyui.css">
<script type="text/javascript" src="jquery-easyui-1.4.4/jquery.min.js"></script>
<script type="text/javascript" src="jquery-easyui-1.4.4/jquery.easyui.min.js"></script>
<script>
$(function(){
$('#addTab').on("click",function(){
openTabs('edit.html','电话');
});
});
</script>
</head>
<body >
<button id="addTab">add Tab</button>
<div class="easyui-tabs" style="width:400px;height:100px;" id="home">
<div title="First Tab" style="padding:10px;">
First Tab
</div>
<div title="Second Tab" closable="true" style="padding:10px;">
Second Tab
</div>
<div title="Third Tab" iconCls="icon-reload" closable="true" style="padding:10px;">
Third Tab
</div>
</div>
</body>
</html>
edit.html
<button id="openDialog">openDialog</button>
<script>
$(function(){
$('#openDialog').on("click",function(){
<!-- 出错的地方 -->
<!-- <div id="messageDialog"></div> -->
//JS动态创建
$('body').append('<div id="messageDialog"></div>');
$('#messageDialog').dialog({
width:500,
height:500,
modal:true,
closed: false,
cache: false,
content:'TEST~~~',
buttons: [{
text: "修改",
iconCls: "icon-edit",
handler: function () {
$.messager.progress({
text: '正在修改电话记录。。。。'
});
setTimeout(function(){
$.messager.progress('close');
$.messager.show({
title: '提示',
msg: '修改记录成功'
});
$("#messageDialog").dialog('close');
},2000);
}
}, {
text: "取消",
iconCls: "icon-redo",
handler: function () {
$("#messageDialog").dialog("close");
}
}]
});
});
})
</script>
问题发现
在<div id="messageDialog"></div>如果不是js动态加载进去的,而是直接写在html中(edit.html注释的地方)就会出现这种bug,console不会报错,所以一直没调试出来.
查看下浏览器控制台是否有错误信息
我贴了个样例代码，看看和你的有哪些地方不一样的？
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Title</title>
<link rel="stylesheet" type="text/css" href="script/easyui_1_4_4/themes/default/easyui.css">
<script type="text/javascript" src="script/jquery_2_1_3/jquery-2.1.3.min.js"></script>
<script type="text/javascript" src="script/easyui_1_4_4/jquery.easyui.min.js"></script>
<script>
$(function(){
$('#openDialog').on("click",function(){
//JS动态创建
$('body').append('<div id="messageDialog"></div>');
$('#messageDialog').dialog({
width:500,
height:500,
modal:true,
closed: false,
cache: false,
content:'TEST~~~',
buttons: [{
text: "修改",
iconCls: "icon-edit",
handler: function () {
$.messager.progress({
text: '正在修改电话记录。。。。'
});
setTimeout(function(){
$.messager.progress('close');
$.messager.show({
title: '提示',
msg: '修改记录成功'
});
$("#messageDialog").dialog('close');
},2000);
}
}, {
text: "取消",
iconCls: "icon-redo",
handler: function () {
$("#messageDialog").dialog("close");
}
}]
});
});
var openTabs = function (path, title) {
if ($('#home').tabs('exists', title)) {
$('#home').tabs('select', title);
} else {
$('#home').tabs('add', {
title:title,
content:'1233123',
closable:true
});
}
};
$('#addTab').on("click",function(){
openTabs('/index.php/PhoneRec/store.html','电话');
});
});
</script>
</head>
<body >
<button id="openDialog">openDialog</button>
<button id="addTab">add Tab</button>
<div class="easyui-tabs" style="width:400px;height:100px;" id="home">
<div title="First Tab" style="padding:10px;">
First Tab
</div>
<div title="Second Tab" closable="true" style="padding:10px;">
Second Tab
</div>
<div title="Third Tab" iconCls="icon-reload" closable="true" style="padding:10px;">
Third Tab
</div>
</div>
</body>
</html>