jQuery UI tabs nested tabs events triggering and binding

I'm using nested jQuery UI tabs as shown here http://jsfiddle.net/VvFyM/1/

I'm trying to bind to the tabsselect event separately for both the outside tabs and the nested tabs. Problem is, whenever 开发者_如何学编程the nested tab's tabsselect event is triggered, it seems that either:

1. The outside tab's tabsselect handler catches it as well, or
2. The outside tab's select event is also triggered (hence it is caught).

Which is it?

Then, is there a way to trigger and bind the 2 events separately?

So, instead of

$("#tabs").bind("tabsselect", function(ev, ui){
    console.log("Tab selected");
})

I want to do something like

$("#tabs").bind("/*tabsselect outside tabs only*/", function(ev, ui){
    console.log("Tab selected");
})

and

$("#tabs").bind("/*tabsselect inside tabs only*/", function(ev, ui){
    console.log("Tab selected");
})

Instead of binding the select function after initialization bind it while you initialize the tabs and that solves the problem. I updated your fiddle to show this: http://jsfiddle.net/R5sSh/

Additionally, you can remove the ui-tabs-selected and ui-tabs-active classes, then you can use $('#tabscontainer').tabs( "select", hashOrIndex );