Question

I know this specific question has been asked before, but I am not getting any results using the bind() event on the jQuery UI Tabs plugin.

I just need the index of the newly selected tab to perform an action when the tab is clicked. bind() allows me to hook into the select event, but my usual method of getting the currently selected tab does not work. It returns the previously selected tab index, not the new one:

var selectedTab = $('#TabList').tabs().data('selected.tabs'); 

Here is the code I am attempting to use to get the currently selected tab:

$('#TabList').bind('tabsselect', function(event, ui) {  }); 

When I use this code, the ui object comes back undefined. From the documentation, this should be the object I’m using to hook into the newly selected index using ui.tab. I have tried this on the initial tabs() call and also on its own. Am I doing something wrong here?

Answer 1

For JQuery UI versions before 1.9: ui.index from the event is what you want.

For JQuery UI 1.9 or later: see the answer by Giorgio Luparia, below.