Question

I’m using this snippet to bind on select event:

$("#myTabControl").tabs({
  select: function(event, ui){
    var selectedTabName = $("#myTabControl").find(".ui-tabs-selected").find("span").text();
    // Do stuff with the selected tab name.
  }
  ...
});

The problem is … I’m getting the name of the tab that was previously selected, not the one that is currently being selected.

Any advice on how to get the latter?

Note – this question is either very similar or a dup … but I’m not sure it is phrased well enough (I’m not even sure if it’s a complete dup or not).

Answer 1

The select event is fired when you click on a tab button. At that moment, the tab has not yet changed.

You should use the show event:

$(paneSelector).tabs({
    show: function(e, ui) {
        var selectedTabName = $(paneSelector).find(".ui-tabs-selected span").text();
    }
});

DEMO