jQueryUI - dynamically add tabs with the same targets

I'm using jQueryUI plugin, and I wish to have several tabs that refer to the same div (which its content is dynamic according to the selected tab).

It works, when i the tabs are static, for example:

<div 开发者_如何学编程id="tabs">
<ul id="tab-links-container">
    <li class="tab-link">
        <a href="#main-tab">One</a>
    </li>     
    <li class="tab-link">
        <a href="#main-tab">Two</a>
    </li>
    <li class="tab-link">
        <a href="#main-tab">Three</a>
    </li>
</ul> 

<div class="tab-body" id="main-tab">
    <span>Here is the shared tabs content</span>
</div>

But when I try to dynamically add a tab, i experience some really bizarre behaviors. Here's how i did it:

$("#tabs").tabs("add", "#main-tab", tabTitle);

The weird behavior is as follows:

• The first tab appears to be selected, but i see no content (the target div is blank).
• When clicking on the second tab, it's selected, the content is shown, but the first tab still appears as selected too, and is not "clickable".
• Only when selecting the third tab, the whole mechanism sorts out, and everything goes back to normal.

When trying to play with similar scenarios i encountered with other bugs, such as the content of the tab (the target) is hidden, or even the tab itself is suddenly erased.

This goes to IE7/8 and Chrome.

Has anyone else also encountered similar problems? Is it a known bug or am I missing something here?

Thanks,