Hi all, I'm using ui.tabs and i would like to trigger a function when a tab is clicked, or more precisely, when a new panel gets shown.
I figured from the doc i should use the select callback but that does not work... HEre is the code i use var $tabs = $("#tabbedTextContent").tabs({ selected: 0, fx: { opacity: 'toggle', duration: 200 }, select: function(e, ui) { alert("hi"); //<!-- the alert() never gets called var $img = $('#tabbedTextContent div.ui-tabs_panel:visible img.albumImage'); if ($img.length) { $('#imageLegend').text($img.attr('title')); } } }); So, the tabs are displayed and work correctly, but the select callback (namely, the alert() call) never gets fired... Right after that block of code i have $('#tabbedTextContent img.albumImage') .css('cursor', 'pointer') //.attr('title', "Click to view the next image") .click(function() { // in image albums, clicking on an image brings the user to the next image var currentTab = $tabs.data('selected.tabs'); $('#imageLegend').text($(this).attr('title')); var nextTab = (currentTab < $tabs.length - 1) ? currentTab + 1 : 0; $tabs.tabs('select', nextTab); return false; }); which works just fine.