Jquery ui选项卡自动选择新创建的选项卡

Question

This question is about jquery ui tabs selecting.
I have been trying to get this seemingly simple thing to work for a few hours. It doesnt select the first dynamicly added tab, but any tab added after that, is auto selected just fine. ( fiddle )
I create a new tab using,

function addTab() {
    var label = tabTitle.val() || tabNameCounter,
        id = "tabs-" + tabCounter,
        li = $(tabTemplate.replace(/#\{href\}/g, "#" + id).replace(/#\{label\}/g, label)),
        tabContentHtml = tabContent.val() || "Tab " + tabCounter + " content.";

    tabs.find(".ui-tabs-nav").find('li:last').before(li);
    tabs.append("<div id='" + id + "'><p>" + tabContentHtml + "</p></div>");
    tabs.tabs("refresh");
    tabCounter++;
    tabNameCounter++;

}

And try selecting it with:

var tabs = $('#tabs').tabs({
    activate: function (event, ui) {
      if (ui.newPanel.is("#add-tab")) {
        tabs.tabs("option","active",-2);
     }
 }

I would really appreciate some insight, Thank you.

Answer 1

If you call setActiveTab(); inside the click handler it seems to be working fine.

$("#add-page").click(function () {
    if (tabNameCounter < 6) {
        addTab();
        addTabBut();
        setActiveTab();
    }
});