Detecting Tabs using tabsactivate - jQuery UI

Question

I am trying to bind an event listener to tab activate event of jQuery

$( ".selector" ).on( "tabsactivate", function( event, ui ) {} );

I am not able to figure out how to make the above function work based on the active tab. I can do it by binding a click event to the tab, but it doesn't work when i use an arrow key.

This is the fiddle of it,

http://jsfiddle.net/aslums/CnEUh/3115/

$("#tabs").tabs({
    activate: function (event, ui) {
        var active = $('#tabs').tabs('option', 'active');
        console.log("Active .."+active)
    }
}
);

$( ".contentTab" ).on( "tabsactivate", tabEnabled);

function tabEnabled(){
console.log("here...")
}

The aim is to trigger a function when the tab is active

Kindly let me know what am missing.

Answer 1

You could use a custom event:

var tabsClicked = []; // keep track of clicked tab indexes

activate: function (event, ui) {
    …
    // Only fire custom event the first time tab is active
    if ($.inArray(active, tabsClicked) === -1) {
      tabsClicked.push(active);        
      $(document).trigger("custom-event", [{tab_index : active}]);          
    }
}

$(document).on("custom-event", customEventHandler);

function customEventHandler(event, data) {
  console.log("Tab: " + (++data.tab_index) + " was clicked");;
}

http://jsfiddle.net/CnEUh/3146/