Question

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");
})

Answer 1

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/