How to handle select event of tab widget of jquery ui?

Question

I use tab widget of jquery ui in my webpage The initialization is ok. but want to capture the on_selected event of a tab to do something else. I followed docs of jquery but it does not work. doc!

I have tried

    $( "#editor-tabs" ).tabs();
    $("#editor-tabs").bind("tabsshow",function(event,ui){
            alert(ui.index);
    });

and

$( "#editor-tabs" ).tabs({
    select: function(event,ui){alert(ui.index);}
});

Put breakpoints to the callback function and they are not hit.

Answer 1

if you use jquery ui 1.10.* , following code is correct. I used the doc by mistake. It is only for 1.8

Better to check your version number if you got a similar problem.

        $("#editor-tabs" ).tabs({                                                                  
            activate:function(event,ui){                                                       
                            alert(ui.index);                                                   
                    }                                                                          
         });   

Answer 2

See my response for this question which is similar:

https://stackoverflow.com/a/17509685/763629

Note for jQuery UI 1.10.x+ use this:

ui.newTab.index()

Answer 3

Would you mind posting a code example? According to http://api.jqueryui.com/tabs/ therer is no "on_selected" event, but activate, beforeActivate, beforeLoad, create and load.

Also what goal do you want to achieve?

Maybe refer to this one: jQuery - trapping tab select event

 $('#tabs, #fragment-1').tabs({
  select: function(event, ui){
    // Do stuff here
  }
});