在jquery-ui 1.9中,如何动态创建新选项卡？

Question

根据jquery-ui 1.9选项卡的升级指南 - http://jqueryui.com/upgrade-guide/1.9/#deprecated-add-and-remove-methods-and-events-use-refresh-method - 添加新内容时动态标签,你只需要做这样的事情:

HTML:

<div id='tabs'>
    <ul>
        <li><a href='#tab1'>#1</a></li>
    </ul>
    <div id='tab1'></div>
</div>
<button id='add-tab'>Add tab</button>

JavaScript的:

$(document).ready(function() {
    $("div#tabs").tabs();

    $("button#add-tab").click(function() {

        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").tabs("refresh");
    });                    
});

但是,当我尝试在新创建的选项卡之间进行更改时,我在firebug中收到以下错误:

jQuery UI选项卡:不匹配的片段标识符.

如果我理解正确,则此错误意味着未创建实际的选项卡面板(因此导航面板和选项卡面板之间存在不匹配).但升级指南未提及创建选项卡面板.

所以我假设我做错了或升级指南不完整.请澄清.

有趣的是,当删除标签时,升级指南说你必须明确地从导航面板和标签面板中明确删除列表项,所以我想知道是否同样适用于添加标签.

Answer 1

指南必须不完整,您需要添加选项卡面板

$(document).ready(function() {
    $("div#tabs").tabs();

    $("button#add-tab").click(function() {

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

例