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

替代：

尝试$（）。制表符（“添加”，选项...）

e.g：

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

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

1 个答案: