web-dev-qa-db-fra.com

Événement Bootstrap shown.bs.tab ne fonctionne pas

J'utilise le modèle Flexy (à l'aide de bootstrap) et je ne parviens pas à faire fonctionner l'événement shown.bs.tab sous onglet.

J'ai réussi à le faire fonctionner sur JSFiddle .

Voici le code que j'utilise dans mon modèle et qui ne produit rien:

<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>

Que puis-je manquer? Si je copie/colle ce code sur le code Flexy, cela ne fonctionne pas. Quelles sont les étapes pour comprendre ce qui ne va pas? Merci !

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

La question était plus une liée à Rails .

J'ai fini par supprimer un par un chaque élément de code car le problème n'était pas présent dans le modèle brut, comme le dit @KyleMit.

Chaque fois que je supprime la ligne //= require bootstrap-sprockets de mon fichier application.js, le problème disparaît!

Le problème était que je demandais à la fois bootstrap et bootstrap-sprockets. J'aurais dû en demander un seul mais pas les deux .

1
Stéphane

Les événements de l'onglet Bootstrap sont basés sur les éléments .nav-tabs et non sur les éléments .tab-content. Ainsi, afin de puiser dans l'événement show, vous avez besoin de l'élément avec un href pointant vers #tab1, et non de l'élément #tab1 content lui-même.

Donc au lieu de cela:

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

Faites ceci à la place:

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

Ou, pour les capturer tous, procédez comme suit:

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

Demo in Stack Snippets

$('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>
13
KyleMit

Si l'onglet est dynamique, essayez quand même d'utiliser

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

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