Вкладки пользовательского интерфейса jQuery динамически добавляют вкладки и содержимое не работает

Question

Я не могу заставить работать вкладки пользовательского интерфейса jQuery при динамическом добавлении вкладок и контента.

<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 ("добавить", опции ...)

например:

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