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

【问题标题】：Remove dynamically created jquery ui tab删除动态创建的 jquery ui 选项卡
【发布时间】：2011-11-01 17:02:21
【问题描述】：

我在 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 中删除）中完全消失，这不是我想要的。

请帮忙，谢谢。

【问题讨论】：

标签： jquery tabs

【解决方案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

【讨论】：

【解决方案2】：

你为什么要摧毁它们？删除应该可以正常工作。 jsFiddle

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

【讨论】：

"$("#tabs").tabs("remove",0);"不起作用，它适用于 7 个原始选项卡中的任何一个，但动态注入的选项卡会导致 firefox “挂起”。