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.

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

Solution 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()

Comments

[GingerJim]

The last answer in your link works. The api changed. the keyword is "activate" instead of "select".