Dynamic tab in jquery fails to be selected after creation

Question

I am creating a dynamic tab via an "tab-add" button.

The "tab-add" button is appended to the end of the tab and then the tab is initialised, e.g.

$('#tabs').sortable({
    create: function( event, ui ) {
        $tabs = $( '#tabtab' ).tabs({
            create: function(event, ui) {
                $('#tabs').append( '<li id="tab-add" class="noSort"></li>' );
            },
            add: function( event, ui ) { ...

When the "tab-add" button ( which is in fact an li ) is clicked a new tab is created using the .tabs( 'add', href, input ) notation. I then inject an input field into this generated tab li. This removes the default generated link within the newly created li.

<li id="tab-1">
    <input type="text" id="tab-input"></input>
</li>

This works fine when the input loses focus the information gathered in the input is posted to a database and the correct li syntax is returned into id "tab-1".

<li id="tab-1">
    <a href="#tabs-1">The Name of My New Tab</a>
</li>

Now, this is where I get stuck.

The correct tab is selected (seen above) and the panel is showing, however when I click on another already created tab and then click back on my just generated tab the tab will not select (see below). When I try to click the "The Name Of My New Tab" tab it doesn't select (highlight).

This has something to do with the fact that the content of "tab-1" was dynamically generated and the tab has not regenerated itself. Since, if I go ahead and add another new tab the tab starts to work fine. I don't want to do a page refresh I just want that tab to work immediately after its been generated. I've tried selecting, loading and enabling the tab with no effect.

Is there a slick way to regenerate the tabs after this dynamic approach?

I hope this read has not been too dull! Any help would be much appreciated.

Answer 1

Okay, I get it now. The problem is that when you add a new tab, the jquery.ui code is attaching a bunch of handlers to that tag that you are then replacing. Instead of replacing this tag, just hide it. Then when the input loses focus, change the text inside that which was created by jquery.ui and show it again. This way you keep all the handlers attached by jquery.ui.