ブートストラップがerb経由で動的レンダリングされたhtmlとバインドしていない

Question

私はブートストラップを持つRailsアプリケーションを開発中です。私の意見の1つでは、「タブ」を使用しています。

<ul class="nav nav-tabs" id="myTab" role="tablist"> 
    <li class="nav-item"> 
    <a class="nav-link active" data-toggle="tab" href="#home" role="tab" aria-controls="home">Home</a> 
    </li> 
    <li class="nav-item"> 
    <a class="nav-link" data-toggle="tab" href="#profile" role="tab" aria-controls="profile">Profile</a> 
    </li> 
    <li class="nav-item"> 
    <a class="nav-link" data-toggle="tab" href="#messages" role="tab" aria-controls="messages">Messages</a> 
    </li> 

</ul> 

<div class="tab-content"> 
    <div class="tab-pane active" id="home"  role="tabpanel">...</div> 
    <div class="tab-pane"  id="profile" role="tabpanel">...</div> 
    <div class="tab-pane"  id="messages" role="tabpanel">...</div> 
</div> 

ハードコードされたHTMLの場合は問題ありません。私は動的に「NAV-タブ」の項目に余分な「李」を追加する場合：

<% if @customer.profiles.present? %> 
<% @customer.profiles.each_with_index do |profile,index| %> 
    <li class="nav-item"> 
    <a class="nav-link" data-toggle="tab" href="#profile<%=index%>" role="tab"> profile-<%=index%> </a> 
    </li> 
<% end %> 
<% end %> 

と一意の番号の両方を持つ「タブ・コンテンツ」の「DIV」：

<% if @customer.profiles.present? %> 
    <% @customer.profiles.each do |profile,index| %> 
     <div class="tab-pane" id="profile<%=index%>" role="tabpanel"> 
      <%= render :partial => 'profiles/homes_pane' , :locals => { :profile => profile} %> 
     </div> 
    <% end %> 
<% end %> 

に追加'href'と 'id'を入力すると、タブはもう機能しません。

したがって、Bootstrapは動的に生成されたHTML要素にJavaScriptをバインドしていないようです。

私は何か間違っているか、回避策が必要ですか？どんな提案も大歓迎です。

よろしくそれはクライアント側のプロセスだとして、 マルタイン

Answer 1

ブートストラップは、動的に生成されたとの違いを知りません。

タブのコンテンツスニペットにeach_with_indexが表示されていないようです。

要素インスペクタを使用すると、2番目の部分のインデックスが正しく表示されないことがわかります。