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

替代方案:

尝试 $().tabs("add", options...)

例如:

$(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/