Adding jQuery tab and Going to Tab in IE8

Question

I'm trying to dynamically add a extra jquery tab to the page and then go to that tab.

I am putting the new tab in just before the last tab (as in the real world example I am actually using the last tab as a button to create the new tab)

For some reason IE8 gets very confused and puts content into the new tab you create which is the html of all the tabs (titles, content etc)

http://jsfiddle.net/nSLfN/3/

any ideas why this might be happening?

Answer 1

You should tabs add method to go to the newly added tab. Also you need to properly set the tab content href and the content. See below,

var $tabs = $('#tabs');
$tabs.tabs({
    tabTemplate: '<li><a href="#{href}">#{label}</a></li>',
    add: function( event, ui ) {
        $tabs.tabs( "option", "selected", ui.index );

        var tabCount = $tabs.tabs("length");
        $(ui.panel).append('<div id="#Delivery"'+ tabCount  +'>New Tab Content ' + tabCount  + '</p>');
    }
});

$('#addtab').click(function() {    
    var tabCount = $tabs.tabs("length");
    $tabs.tabs("add", "#Delivery" + tabCount, "Delivery " + tabCount, tabCount-1);
});

DEMO