web-dev-qa-db-ja.com

Bootstrap shown.bs.tab event not working

Flexyテンプレート （ブートストラップを使用）を使用していますが、タブのShowed.bs.tabイベントを機能させることができません。

JSFiddle で動作させることができました。

これは、何も生成しないテンプレートで使用するコードです。

<div role="tabpanel">
  <ul class="nav nav-tabs" role="tablist">
    <li class="active"><a id="tab1" href="#chart1" role="tab" data-toggle="tab">Tab 1</a></li>
    <li><a id="tab2" href="#chart2" role="tab" data-toggle="tab">Tab 2</a></li>
  </ul>
  <div class="tab-content">
    <div class="tab-pane active" id="chart1">Tab 1 Content</div>
    <div class="tab-pane" id="chart2">Tabe 2 Content</div>
  </div>
</div>

<script>
  $(function() {
    $('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
      alert(e.target.href);
    })
  });
</script>

私は何を見逃すことができますか？このコードをコピーしてFlexyコードに貼り付けると、機能しません。何が悪いのかを理解するためのステップは何ですか？よろしくお願いします！

javascriptjqueryruby-on-railstwitter-bootstrapbootstrap-sass
8
Stéphane

問題はもっとRails関連のものでした。

@KyleMitが言うように、未加工のテンプレートには問題がなかったので、コードを1つずつ削除してしまいました。

Application_jsファイルから//= require bootstrap-sprocketsの行を削除するたびに、問題は解消されます。

問題は、bootstrapとbootstrap-sprocketsの両方を必要としていたことでした。私はそれらの1つだけを必要とするはずでしたが、両方ではないです。

1
Stéphane

ブートストラップタブイベント は、.nav-tabs要素ではなく、.tab-content要素に基づいています。そのため、showイベントを利用するには、#tab1コンテンツ要素自体ではなく、#tab1を指すhrefを持つ要素が必要です。

したがって、これの代わりに：

$('#tab1').on('shown.bs.tab', function (e) {
    alert("tab1");
});

代わりにこれを行ってください：

$('[href=#tab1]').on('shown.bs.tab', function (e) {
    alert("tab1");
});

または、それらすべてをキャプチャするには、次のようにします。

$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
  alert(e.target.href);
})

スタックスニペットのデモ

$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
  alert(e.target.href);
})
<link href="//cdnjs.cloudflare.com/ajax/libs/Twitter-bootstrap/3.3.2/css/bootstrap.css" rel="stylesheet"/>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/Twitter-bootstrap/3.3.2/js/bootstrap.js"></script>

<div role="tabpanel">
  <ul class="nav nav-tabs" role="tablist">
    <li class="active"><a id="tab1" href="#chart1" role="tab" data-toggle="tab">Tab 1</a></li>
    <li><a id="tab2" href="#chart2" role="tab" data-toggle="tab">Tab 2</a></li>
  </ul>
  <div class="tab-content">
    <div class="tab-pane active" id="chart1">Tab 1 Content</div>
    <div class="tab-pane" id="chart2">Tabe 2 Content</div>
  </div>
</div>
19
KyleMit

とにかくタブが動的な場合は、

$(document).on('shown.bs.tab', 'a[data-toggle="tab"]', function (e) {

        alert(e.target.href);
    })
8
Leon

私の場合、JqueryとBootstrapの間に競合がありました。

JQuery.noConflict（）で問題を解決しました。下記参照！

お役に立てば幸いです。

// Issue @ tabs toggle 
jQuery.noConflict();
$(document).on('shown.bs.tab', 'a[data-toggle="tab"]', function (e) {
    alert(e.target.href);
});
0
Jokova