Twitterブートストラップのタブがモーダル内で動作しない

Question

レールアプリケーションで、私はモーダルウィンドウ（ブートストラップモーダル）の内容をAjax経由で読み込んでいます。これは正常に動作します。

このコンテンツにはタブ（ブートストラップタブ）が含まれています。タブが正しく表示され、タブをクリックするとアクティブなタブが正しく変更されますが、コンテンツは変更されません。

<div id="negotiation-details"> 
    <div id="negotiation-overview"></div> 

    <ul id="nego-tabs-menu" class="tabs"> 
    <li class="active"><a href="#nego-figures">Figures</a></li> 
    <li><a href="#nego-dates">Dates</a></li> 
    <li><a href="#nego-characteristics">Characteristics</a></li> 
    </ul> 
    <div id="my-tab-content" class="tab-content"> 
    <div id="nego-figures" class="tab-pane active">figures content</div> 
    <div id="nego-dates" class="tab-pane">dates content</div> 
    <div id="nego-characteristics" class="tab-pane">characteristics content</div> 
    </div> 
</div> 

アイデアはありますか？ DOMの後にタブが読み込まれていることが原因ですか？もしそうなら、私は再びそれらを有効にすることができますか？

Answer 1

愚かな間違い。私は2番目のモーダルウインドウがレンダリングされていることが分かりました。

私のjavascriptは、クラス名に基づいてモーダルの内容を更新しました。右のIDでモーダルを目標に設定することで、固定されたものになります。

$('#modal-window .modal-body') 

代わりの提案のための

$('.modal-body') 

Answer 2

私はあなたのコードをテストし、それがそうのように、タブメニューの各項目に

"data-toggle"=>"tab" 

を追加した後に働いた：

#negotiation-details 
    #negotiation-overview 
    %ul#nego-tabs-menu.tabs 
    %li.active 
     %a{:href => "#nego-figures","data-toggle"=>"tab"} Figures 
    %li 
     %a{:href => "#nego-dates","data-toggle"=>"tab"} Dates 
    %li 
     %a{:href => "#nego-characteristics","data-toggle"=>"tab"} Characteristics 
    #my-tab-content.tab-content 
    #nego-figures.tab-pane.active figures content 
    #nego-dates.tab-pane dates content 
    #nego-characteristics.tab-pane characteristics content 

Psと。 hamlの構文については残念です。