select dynamic tab immediately upon new tab creation

Question

demo : http://jsfiddle.net/axrwkr/ujUu2/

var num_tabs = $("div#tabs ul li").length + 1;

        $("div#tabs ul").append(
            "<li><a href='#tab" + num_tabs + "'>#" + num_tabs + "</a></li>"
        );
$("div#tabs").append(
            "<div id='tab" + num_tabs + "'>#" + num_tabs + "</div>"
        );
        $("div#tabs").tabs("refresh");

the new tabs syntax is so complicated (after 1.9 upgrade)..

one more question, 1.9 onward the remove method had been depreceated, so if I want to remove a particular tab, should I use remove() to remove the tab element and then the appended div (content)? that sound un-practical..

Answer 1

add this in the end of $("button#add-tab").click(function()

DEMO

$('a[href=#tab'+num_tabs+']').click(); //click new tab link to make it active

or you can use active option

DEMO

$("div#tabs").tabs("refresh").tabs({ active:num_tabs - 1});

Answer 2

Use the active option

$("div#tabs").tabs("refresh").tabs('option', 'active', num_tabs - 1);

Demo: Fiddle