Question

I’m adding a settings tab dynamically if some clicks my settings link on the page but I’d like to remove it once the settings tab has lost focus (meaning they clicked on another tab) The tab is being removed but it seems to go into an infinite loop calling the removeSettingsTab method. Any idea why?

    $("#navMain").tabs({
        select: function(event, ui) { 

            var selected = $("#navMain").tabs( "option", "selected" );

                if (selected == 8) {
                    removeSettingsTab();
                } 
            }
    });

    $('.settings').click(function () {      
        createSettingsTab();
        $('#navMain').tabs('select', "tab-setting");
    });

    function createSettingsTab() {
        $("#navMain").tabs("add","#tab-setting","Settings");
        $("#tab-setting").css("display","block");
    }

    function removeSettingsTab() {
        $('#navMain').tabs('remove', 8);
    }

Answer 1

Bind a handler to the show event that checks if

1. The “Settings” tab has already been added (this will prevent removing tabs before the special functionality should be triggered) and
2. The tab that has been shown is a different one than the settings tab

If both of these conditions hold, it can go on and call removeSettingsTab().

For example, this code works for me (with 3 tabs, last one is “settings” and it has already been added):

$(function() {
    $( "#navMain" ).tabs({
        show: function() {
            var $tabs = $("#navMain");
            if ($tabs.tabs("option", "selected") != 2) {
                $tabs.tabs("remove", 2);
            }
        }
    });
});