Question

我在jspx页面上有7个jquery ui标签。我动态添加一个新标签，以便从搜索表单中呈现搜索结果。到现在为止还挺好。现在，当用户单击任何其他选项卡时，必须删除新创建的“搜索结果”选项卡。这是我的问题开始的地方。

                $('#tabs').tabs({
                    select : function(event, ui) { //bind click event to link                   
                        selectedIndex = ui.index;

                        if ((selectedIndex < 8) && ($('#tabs').tabs("length") > 8)) {
                            $('#tabs').tabs('remove',8);
                        }

                         //I have other stuff here for each of the original 7 tabs
                 });

在我重新初始化标签

之后，似乎只能删除此标签

$('#tabs').tabs('destroy').tabs();
$('#tabs').tabs('remove',8);

但是我的页面上有一个数据网格，它根据单击的选项卡索引动态添加到选项卡系统中。如果我销毁然后移除，我的网格将完全从所有其他标签（从dom中移除）消失，这是不我想要的。

请帮助，谢谢。

Answer 1

问题是您正在尝试删除当前显示的标签。由于此事件在标签更改确实发生之前触发，因此您实际上是从自己身下拉出地毯。来自UI来源：

select: function( index ) {
    index = this._getIndex( index );
    if ( index == -1 ) {
        if ( this.options.collapsible && this.options.selected != -1 ) {
            index = this.options.selected;
        } else {
            return this;
        }
    }
    this.anchors.eq( index ).trigger( this.options.event + ".tabs" );//YOUR EVENT
    return this;
},

如果你想删除一个标签，你必须小心“何时”发生这种情况。挂钩到“show”时，你的代码工作正常。

show: function(event, ui) { //bind click event to link                   
                selectedIndex = ui.index;

                if ((selectedIndex < 2) && ($('#tabs').tabs("length") > 2)) {
                    $('#tabs').tabs('remove',2);
                }
            }

jsfiddle

Answer 2

你为什么要摧毁他们？删除应该工作得很好。 jsFiddle

$( "#tabs" ).tabs();
$("#remove").click(function(){
    $( "#tabs" ).tabs("remove",0);
})

删除动态创建的jquery ui选项卡

2 个答案: