jQuery UI选项卡动态添加选项卡和内容不起作用

Question

动态添加标签和内容时,我无法使jQuery UI标签工作.

<div id="wrap">
    <ul></ul>
</div>

jQuery的

var count = 1;
$('#addspan').click(function() {
    $('#wrap').append('<span id="page' + count + '">testing</span>');
    $('#wrap').find('ul').append('<li><a href="#page' + count + '">' + count + '</a></li>');
    count++;
    $('#wrap').tabs();
});

查看http://jsfiddle.net/qKBUu/1/

您可以看到新创建的内容未显示在其受尊重的选项卡中.所有内容一次显示,标签不起作用.

Answer 1

试试这个:

    $(function(){
        var count = 1;

        $('#addspan').click(function() {
            $('#wrap').append('<span id="page' + count + '">testing</span>');
            $('#wrap').find('ul').append('<li><a href="#page' + count + '">' + count + '</a></li>');
            count++;
            var selIndex = $( "#wrap" ).tabs( "option", "selected" );
            $('#wrap').tabs("destroy").tabs({selected: selIndex});
        });
    });

替代方案:

尝试$().制表符("添加",选项......)

例如:

$(function(){
            var count = 1;
            $('#wrap').tabs();
            $('#addspan').click(function() {
                $('#wrap').append('<span id="page' + count + '">testing</span>');
                //$('#wrap').find('ul').append('<li><a href="#page' + count + '">' + count + '</a></li>');
                $('#wrap').tabs("add","#page" + count, count);
                count++;
            });
        });

示例@:http://jsfiddle.net/Chandu/qKBUu/3/