如何在初始頁面加載後將整個選項卡元素添加到頁面時初始化twitter引導2.0選項卡

我通過包含新的可放置元素的Ajax將某些HTML加載到頁面中。唯一的問題是選項卡不起作用，因爲bootstrap已經被初始化。所以我嘗試了下面的代碼，使用jQuery正確定位包含標籤的ul。但是，該選項卡並未初始化。如何在初始頁面加載後將整個選項卡元素添加到頁面時初始化twitter引導2.0選項卡

下面是HTML（加載到DOM初始化後的頁面，通過AJAX）：

<div class="tabbable tabs-left"> 
    <ul class="nav nav-tabs"> 
    <li class="active"><a href="#tab-fixes-27" data-toggle="tab">One</a></li> 
    <li class=""><a href="#tab-final-27" data-toggle="tab">Two</a></li> 
    <li class=""><a href="#tab-orig-27" data-toggle="tab">Thre</a></li> 
    </ul> 
    <div class="tab-content"> 
    <div class="tab-pane active" id="tab-fixes-27"> 
     <p>Conten1</p> 
    </div> 
    <div class="tab-pane" id="tab-final-27"> 
     <p>Conten2</p> 
    </div> 
    <div class="tab-pane" id="tab-orig-27"> 
     <p>Conten3</p> 
    </div> 
    </div> 
</div>

然後我的javascript：

$('.nav-tabs').tab();

好像從我讀（http://www.mightywebdeveloper.com/coding/bootstrap-2-tabs-jquery-load-content/ ）應該初始化標籤，但它什麼都不做。

問題是，儘管初始化標籤頁，當我點擊它們時，沒有任何反應。即使我使用.tab（'show'）來定位特定選項卡，但它確實顯示正確。當我點擊標籤時仍然沒有任何反應。

此外，如果我在添加它們之後添加它們（請參閱http://jsfiddle.net/HLj4N/9/，在單擊按鈕後將上面的HTML附加到div），這些選項卡似乎可以正常工作。看起來有人在添加bootstrap.js時已經初始化了它。

關於爲什麼點擊標籤沒有任何想法？

來源

2013-07-03 key2starz

事實證明，我使用的bootstrap.js被修改，以便下面有一些額外的字符：[data-xxxxxxx-toggle =「tab」]，所以我只需要做一些更改爲HTML，然後運行。 – key2starz

你介意解釋你到底做了什麼嗎？因爲我有完全相同的問題。謝謝！ – Cheeky

你什麼時候附上標籤？像下面加載ajax後？

$.get(baseUrl + 'blabla.html').done(
    $('.nav-tabs').tab(); 
);

來源

2013-07-03 08:07:40 dotmindlabs

另一個訣竅是選擇標籤，例如第一個標籤 – dotmindlabs

是的，在加載ajax之後。這很奇怪......我沒有在控制檯或任何東西中發現任何錯誤。 – key2starz

我試着選擇標籤並顯示 - 哪個顯示/選擇標籤（我做了第二個和最後一個標籤）。但是，仍然點擊什麼都不做。由於看起來原因，單擊事件處理程序從未初始化。有什麼想法嗎？ – key2starz

如何在初始頁面加載後將整個選項卡元素添加到頁面時初始化twitter引導2.0選項卡

回答

相關問題