動的に追加されたjQuery-uiタブの内容は1回だけ表示されます

Question

jQuery UIを使用してタブセットを作成しようとしています。特別なタブは一時的に追加されます。フォームに含まれているフォームが送信されると、タブは削除されます。

ただし、タブを削除した後、後で再追加するとコンテンツが表示されず、その理由がわかりません。私はそれをthis jsFiddle exampleに蒸留しました。コードも以下に転載しました。

HTML：

<div id="tabs"> 
    <ul> 
     <li><a href="#foo">Foo</a></li> 
    </ul> 
    <div id="foo"> 
     <h2>Foo Tab</h2> 
    </div> 
    <div id="bar" class="transient" style="display: none"> 
    <h2><button type="button" class="close" style="float: right"><span class="ui-icon ui-icon-closethick">close</span></button>Bar Tab</h2> 
    </div> 

    <div id="baz" class="transient" style="display: none"> 
     <h2><button type="button" class="close" style="float: right"><span class="ui-icon ui-icon-closethick">close</span></button>Baz Tab</h2> 
    </div> 

</div> 

<hr> 
<button onClick="openTransientTab('bar', 'Bar')">Add Bar Tab</button> 
<button onClick="openTransientTab('baz', 'Baz')">Add Baz Tab</button> 

のJavaScript：ページをロードすると

$('#tabs').find('div.transient').find(".close").live('click', function() { 
     var footer_tabs = $('#tabs'); 
     var tab_id = $(this).closest("div.transient").attr("id"); 
     var index = footer_tabs.tabs("option", "selected"); 
     footer_tabs.tabs("select", -1); 
     footer_tabs.tabs("remove", index); 
}); 

function openTransientTab(id, title) { 
    var footer_tabs = $("#tabs"); 
    footer_tabs.tabs("select", -1); 
    footer_tabs.tabs("select", "#" + id); 
    var selected = footer_tabs.tabs("option", "selected"); 
    if (selected < 0) { 
     footer_tabs.tabs("add", "#" + id, title); 
     footer_tabs.tabs("select", "#" + id); 
    } 

    $("#" + id).css("display", "block"); 
} 

$(function() { 
     var footer_tabs = $("#tabs"); 
     footer_tabs.tabs({ 
       collapsible: true, 
       selected: -1 
     }); 
}); 

Answer 1

なぜ彼らである、バー、バズのタブが作成されますが、自分のスタイルで、ディスプレイがnoneに設定されています元々は見えません。タブの中で、Xを押すと、実際にbarとbazのdivが完全に削除されます。閉じた後にバーまたはbazタブを追加するために再度クリックすると、divが再作成されますが、その中に何も入れていません。タブを作成すると、次のようなものを追加します。

document.getElementById("bar").innerHtml = whatever you want within it here 

前：

<div id="foo" class="ui-tabs-panel ui-widget-content ui-corner-bottom ui-tabs-hide"> 
<h2>Foo Tab</h2> 
</div> 
<div id="baz" class="transient" style="display: none"> 
<h2> 
<button class="close" style="float: right" type="button"> 
<span class="ui-icon ui-icon-closethick">close</span> 
</button> 
Baz Tab 
</h2> 
</div> 
<div id="bar" class="transient ui-tabs-panel ui-widget-content ui-corner-bottom" style="display: block;"> 
<h2> 
<button class="close" style="float: right" type="button"> 
<span class="ui-icon ui-icon-closethick">close</span> 
</button> 
Bar Tab 
</h2> 
</div> 

開くとCollecterが働いていなかったかについてのキー洞察を提供した後、両方の

<div id="foo" class="ui-tabs-panel ui-widget-content ui-corner-bottom ui-tabs-hide"> 
<h2>Foo Tab</h2> 
</div> 
<div id="bar" class="ui-tabs-panel ui-widget-content ui-corner-bottom ui-tabs-hide" style="display: block;"></div> 
<div id="baz" class="ui-tabs-panel ui-widget-content ui-corner-bottom" style="display: block;"></div> 

Answer 2

を閉じた後、私はタブを保存するためのよりよい方法を見つけました再利用のためのコンテンツ。私は次の私の近くに機能を変更：

$('#tabs').find('div.transient').find(".close").live('click', function() { 
    var footer_tabs = $('#tabs'); 
    var tab = $(this).closest("div.transient"); 
    var index = footer_tabs.tabs("option", "selected"); 
    footer_tabs.tabs("select", -1); 
    footer_tabs.tabs("remove", index); 
    footer_tabs.append(tab); 
});