in the below code none of the alerts are getting called?
<head>
<script src='../../Scripts/jquery/jquery.js' type='text/javascript'></script>
<link rel="stylesheet" href="../../content/jquery-tabs/jquery.tabs.css" type="text/css" media="print, projection, screen">
<script src="../../Scripts/jquery-tabs/jquery.history_remote.pack.js" type="text/javascript"></script>
<script src="../../Scripts/jquery-tabs/jquery.tabs.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#tabs").tabs();
});
$(document).ready(function() {
$('#tabs').bind('tabsselect', function(event, ui) {
// Objects available in the function context:
alert(ui.tab); // anchor element of the selected (clicked) tab
alert(ui.panel); // element, that contains the selected/clicked tab contents
alert(ui.index); // zero-based index of the selected (clicked) tab
});
});
</script>
</head>
<body>
<h2>
TestTabs</h2>
<div id="tabs">
<ul>
<li><a href="#fragment-1"><span>1 Info</span></a></li>
<li><a href="#fragment-2"><span>2 Info</span></a></li>
<li><a href="#fragment-3"><span>3 Info</span></a></li>
<li><a href="#fragment-4"><span>4 Info</span></a></li>
</ul>
<div id="fragment-1">
<h2>TestTabs</h2>
</div>
<div id="fragment-2">
<h2>TestTabs</h2>
</div>
<div id="fragment-3">
<h2>TestTabs</h2>
</div>
<div id="fragment-4">
<h2>TestTabs</h2>
</div>
</div>