4

アプリケーションでTwitterブートストラップを使用しています。特定のケースでは、ajaxリクエストの後に動的にタブを追加する必要があります。

タブヘッドのliタグと、タブヘッドアンカーのhrefで指定された関連IDを持つそれぞれのコンテンツ領域を追加しました。

ただし、新しく追加されたタブは、ブートストラップタブでは機能しません。$("#tabs1").tabs()新しいタブが動的に追加された直後に呼び出すことでタブ機能を更新しようとしましたが、使用できませんでした。

動的データでブートストラップタブを使用する方法について教えてください。

注：ただし、ページの読み込み中に表示された他のすべてのタブは問題なく機能します。

4

1 に答える 1

9

$(...).on()の代わりにを使用してタブを初期化する必要があります$(...).click()。このようにして、クリックイベントを#myTab子タグに直接バインドするのではなく、親要素にバインドできますa。

$("#myTab").on("click", "a", function(e){
  e.preventDefault();
  $(this).tab('show');
});

これで、click-Eventは-Elementにバウントさ#myTabれ、子a-Tagに委任されます。

  • ここで実行中のデモを見つけることができます
  • 「イベントハンドラーについて」の詳細については、 jQueryドキュメントをお読みください
于 2012-07-25T13:30:10.313 に答える