close option for dynamically added AJAX tab is not working
I am adding ajax tabs using add method (with close span). But $('.ui-icon-close').live('click', function() {}) doesn't seems to get triggered.
<link type="text/css" href="js/jquery/jquery-ui-1.8.custom/css/ui-lightness/jquery-ui-1.8.custom.css" rel="stylesheet" />
<script type="text/javascript" src="js/jquery/jquery-ui-1.8.custom/js/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="js/jquery/jquery-ui-1.8.custom/js/jquery-ui-1.8.custom.min.js"></script>
<style type="text/css">
#tabs { margin-top: 1em; }
#tabs li .ui-icon-close { float: left; margin: 0.4em 0.2em 0 0; cursor: pointer; }
#add_tab { cursor: pointer; }
</style>
<script type="text/javascript">
$(function() {
var tab_counter = 0;
var $tabs = $('#tabs').tabs({
ajaxOptions: {
error: function(xhr, status, index, anchor) {
$(anchor.hash).html("Couldn't load this tab.");
}
}
,add: function(event, ui) {
//select newely opened tab
$(this).tabs('select',ui.index);
}
});
// actual addTab function: adds new tab using the title input from the form above
function addTab() {
var id = ""+tab_counter;
var removeTabSpan = '<span id="span-'+id+'" class="ui-icon ui-icon-close">Remove Tab</span>';
var tab_title = 'A New Tab '+id;
// tab that loads remote file contents
$("#tabs").tabs("add", "metering/grid/newtab.jsf" + '?' + id, tab_title+removeTabSpan);
tab_counter++;
}
// addTab button:
$('#add_tab')
.button()
.click(function() {
addTab();
});
// close icon: removing the tab on click
$('.ui-icon-close').live('click', function() {
var index = $('li',$tabs).index($(this).parent());
$tabs.tabs('remove', index);
});
});
</script>
</head>
<body class="tundra" style="width:100%;height:100%;padding:0;margin:0;overflow:hidden !important;">
<div id="layout-container" style="width:98%;height:98%;padding:0;margin:0;">
<button id="add_tab">Add Tab</button>
<div id="tabs">
<ul>
</ul>
</div>
</div>
</body>
</html>