動態添加的jQuery-ui選項卡的內容只顯示一次

我想創建一個使用jQuery UI的選項卡集，它具有一些永久性選項卡以及一些特殊用途選項卡。臨時添加特殊標籤：當它們包含的表單被提交時，標籤被刪除。動態添加的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 
     }); 
});

來源

2011-06-21 Brad Mace

當加載頁面，創建酒吧和巴茲標籤，但在他們的風格，顯示設置爲none這就是爲什麼他們原本是不可見的。在標籤內部，當你點擊X時，它實際上完全移除了bar和baz的div。當你關閉後重新點擊添加bar或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>

打開和關閉兩個

<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>

來源

2011-06-21 14:42:52 Collecter

我發現了一個更好一點的方式來保存的標籤內容，但明確指出我在正確的方向 –

好吧。我沒有太多使用jQuery，但很高興能提供幫助。 – Collecter

後集氣器提供關於什麼是不工作的主要觀點後，我發現了一個更好的方式來保存的標籤內容以供重用。我改變了我的關閉功能於以下內容：

$('#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); 
});

來源

2011-06-21 15:42:42

動態添加的jQuery-ui選項卡的內容只顯示一次

回答

相關問題