Bootstrap shown.bs.tab event not working

Question

I'm using the Flexy template (using bootstrap) and I can't get the shown.bs.tab event on tab to work.

I've managed to make it work on JSFiddle.

Here is the code I use in my template that produce nothing :

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

What can I miss ? If I copy/paste this code on the Flexy code it doesn't work. What are the steps to understand what is wrong ? Thanks !

KyleMit · Answer 1 · 2020-02-14T14:22:48.463

30

Bootstrap tab events are based off the .nav-tabs elements, not the .tab-content elements. So in order to tap into the show event, you need the element with an href that is pointed towards #tab1, not the #tab1 content element itself.

So instead of this:

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

Do this instead:

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

Or, to capture all of them, just do this:

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

Demo in Stack Snippets

$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
  console.log(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>

edited Feb 14 '20 at 14:22

answered May 26 '15 at 20:33

KyleMit

30,350
66
462
664

Thanks for your detailed answer ! I understand what you said but unfortunately it still doesn't work, there must be something else somewhere ... I created a test page so you can take a look if you want : http://ow.ly/NtxpL – ZazOufUmI May 27 '15 at 06:44
Though we see the shown event in Firebug... http://hpics.li/42cc757 But it is never fired – ZazOufUmI May 27 '15 at 06:52
@StéphaneJ., here's an example of the [exact code I provided working on your exact page](http://i.imgur.com/0RTyWOH.gif). In general, please try to avoid representing issues on your own custom test pages. Instead, try to abstract your problem down into small sections of reproducible code instead of providing a link to your own web page with tons of code. **See also**: [Something in my web site or project doesn't work. Can I just paste a link to it?](http://meta.stackoverflow.com/q/254428/1366033). – KyleMit May 27 '15 at 12:49
1

thank you for you quality answer. The problem is that I know this is supposed to work, but not in my code. Anyway, your example helped me, I will try to understand the differences between the raw template and mine. – ZazOufUmI May 27 '15 at 12:57
I don't know if it can be the problem but I'm using Rails – ZazOufUmI May 27 '15 at 13:20

score 13 · Answer 2 · edited Aug 27 '21 at 18:25

13

If the Tab is dynamic in anyway try using

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

edited Aug 27 '21 at 18:25

Brian Burns

20,575
8
83
77

answered Nov 10 '17 at 14:21

Leon

616
1
6
10

Yeap that worked but i don't understand why this example : https://getbootstrap.com/docs/5.0/components/navs-tabs/#events doesn't work – Vipertecpro Aug 03 '22 at 05:41

Jokova · Answer 3 · 2019-11-02T19:44:23.690

6

In my case, there was a conflict between Jquery and Bootstrap.

I solved the problem with jQuery.noConflict(). See below!

I hope that helps!

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

edited Nov 02 '19 at 19:44

answered Oct 16 '19 at 08:12

Jokova

166
2
5

This worked for me, but I'm not sure why... Can you please explain what this does? – Oscar Chambers Dec 05 '20 at 06:30

ZazOufUmI · Accepted Answer · 2015-06-18T08:30:43.053

2

The issue was more a rails-related one.

I ended up by removing one by one every piece of code since the issue was not there in the raw template as @KyleMit says.

Whenever I remove the line //= require bootstrap-sprockets from my application.js file the issue disappears !

The issue was that I was requiring both bootstrap and bootstrap-sprockets. I should have require just one of them but not both.

edited Jun 18 '15 at 08:30

answered May 27 '15 at 13:47

ZazOufUmI

3,212
6
37
67

score 0 · Answer 5 · answered Jun 23 '20 at 04:48

The issue I faces was that I had 2 sets of tabs on my page. and I had already bound the 1st tab set with

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

For the 2nd tab set also i had defined the same way.. but I had assigned an id to the ul and bound the click element as:

  $('#tabId > li > a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
      console.log(e.target.href);
    })

The 1st tab was working here but the 2nd wouldn't work. I then figured it out and assigned id's to both uls.. now it works

score 0 · Answer 6 · edited Mar 21 '22 at 22:41

0

Try this, it's simple and listen to the only Tab you need :

$('a[href="#idTab"]').on('shown.bs.tab', function (e) {
 `console.log('this tab is shown');`//or do something else
}

edited Mar 21 '22 at 22:41

cigien

57,834
11
73
112

answered Mar 21 '22 at 20:47

أيمن - ⴰⵢⵎⵏ - ⵣ

26
4

score 0 · Answer 7 · answered Jul 09 '22 at 10:53

In my case, the bootstrap event 'shown.bs.tab' failed to fire using the above solutions. So, I decided to enable tabbable tabs via javaScript.

    const adjustColumnHeaders = () => {
        window.setTimeout(() => {
            $($.fn.dataTable.tables(true)).DataTable()
                .columns.adjust()
                .responsive.recalc();
        }, 200);
    };

    const boostrapTabs = $('a[data-bs-toggle="tab"]');
    boostrapTabs.click(function () {
        $(this).tab("show");
        adjustColumnHeaders();
    });

    $(document).ready(function () {
        const tabLink = $(`a[href=${'"' + window.location.hash + '"'}]`);
        if(tabLink.length) tabLink.trigger( "click" );
    });

Then in your HTML markup, rename data-toggle="tab" to data-bs-toggle="tab". I.e:

 <li class="nav-item" role="presentation">
    <a class="nav-link" data-bs-toggle="tab" href="#tab-employees">
      Employees
   </a>
 </li>

Bootstrap shown.bs.tab event not working

7 Answers7

Demo in Stack Snippets

Linked