can anyone determine why the Jquery ui tabs events are not firing in the below code

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>

Solution

It works for me.

Make sure that you're using the current version of jQuery UI.

Do you get any script errors?