最近使用easyui的tab标签做页面，在使用了update方法之后，发现新增的页面无法关闭，代码如下：
$("a.addCategory").click(function() {
var title = "xxx";
var url = "test.jsp";
var tab = $("div#tabs").tabs("getTab", title);
var content = "<iframe id=\"iframe\" scrolling=\"no\" frameborder=\"0\" src=\"" + path + "/" + url + "\" style=\"width:100%;height:100%;\"></iframe>";
if (tab != null) {
$("div#tabs").tabs('update', {
tab : tab,
options : {
content:content
},
closable:true,
});
tab.panel('refresh');
$("div#tabs").tabs("select", title);
} else {
$("div#tabs").addTab({
title : title,
url : url,
closable:true
});
}
});
在调试的时候发现标签如截图：1为新增正常的关闭按键，二为update之后的关闭按键，后面的jQuery的Id找不到了，请教这个该如何解决，急！！！！！
$("a.addCategory").click(function() {
var title = "xxx";
var url = "test.jsp";
var tab = $("div#tabs").tabs("getTab", title);
var content = "<iframe id=\"iframe\" scrolling=\"no\" frameborder=\"0\" src=\"" + path + "/" + url + "\" style=\"width:100%;height:100%;\"></iframe>";
if (tab != null) {
$("div#tabs").tabs('update', {
tab : tab,
options : {
content:content
},
closable:true,
});
tab.panel('refresh');
$("div#tabs").tabs("select", title);
} else {
$("div#tabs").addTab({
title : title,
url : url,
closable:true
});
}
});
在调试的时候发现标签如截图：1为新增正常的关闭按键，二为update之后的关闭按键，后面的jQuery的Id找不到了，请教这个该如何解决，急！！！！！
可以借鉴下官网的demo啊
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Tabs - jQuery EasyUI Demo</title>
<link rel="stylesheet" type="text/css" href="../themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="../themes/icon.css">
<link rel="stylesheet" type="text/css" href="demo.css">
<script type="text/javascript" src="../jquery-1.6.min.js"></script>
<script type="text/javascript" src="../jquery.easyui.min.js"></script>
<script type="text/javascript">
$(function(){
$('#tt').tabs({
tools:[{
iconCls:'icon-add',
handler: function(){
alert('add');
}
},{
iconCls:'icon-save',
handler: function(){
alert('save');
}
}]
});
});
var index = 0;
function addTab(){
index++;
$('#tt').tabs('add',{
title:'New Tab ' + index,
content:'Tab Body ' + index,
iconCls:'icon-save',
closable:true
});
}
function getSelected(){
var tab = $('#tt').tabs('getSelected');
alert('Selected: '+tab.panel('options').title);
}
function update(){
index++;
var tab = $('#tt').tabs('getSelected');
$('#tt').tabs('update', {
tab: tab,
options:{
title:'new title'+index,
iconCls:'icon-save'
}
});
}
</script>
</head>
<body>
<h2>Tabs</h2>
<div class="demo-info">
<div class="demo-tip icon-tip"></div>
<div>Tabs are automatically made scrollable when the sum of their width exceeds their container width size.</div>
</div>
<div style="margin:10px 0">
<a class="easyui-linkbutton" icon="icon-add" href="javascript:void(0)" onclick="addTab()">add tab</a>
<a class="easyui-linkbutton" href="javascript:void(0)" onclick="getSelected()">getSelected</a>
<a class="easyui-linkbutton" href="javascript:void(0)" onclick="update()">Update</a>
</div>
<div id="tt" style="width:700px;height:250px;">
<div title="Tab1" style="padding:20px;">
</div>
<div title="Tab2" closable="true" style="padding:20px;" cache="false" href="tabs_href_test.html">
This is Tab2 with close button.
</div>
<div title="Tab3" iconCls="icon-reload" closable="true" style="padding:20px;">
<table id="test" class="easyui-datagrid" fit="true">
<thead>
<tr>
<th field="f1" width="60">field1</th>
<th field="f2" width="60">field2</th>
<th field="f3" width="60">field3</th>
</tr>
</thead>
<tbody>
<tr>
<td>d1</td>
<td>d2</td>
<td>d3</td>
</tr>
<tr>
<td>d11</td>
<td>d21</td>
<td>d31</td>
</tr>
</tbody>
</table>
</div>
<div title="Tab4 with iframe" closable="true">
<iframe scrolling="yes" frameborder="0" src="http://www.google.com" style="width:100%;height:100%;"></iframe>
</div>
<div title="Tab5 with sub tabs" closable="true" iconCls="icon-cut" style="padding:10px;">
<div class="easyui-tabs" fit="true" plain="true" style="height:100px;width:300px;">
<div title="Title1" style="padding:10px;">Content 1</div>
<div title="Title2" style="padding:10px;">Content 2</div>
<div title="Title3" style="padding:10px;">Content 3</div>
</div>
</div>
</div>
</body>
</html>