Bootstrap tabs shown event only fires the first time and not on second or later tab switches

Question

I'm using Bootstrap version 3.3.5 and have a view with two tabs to switch between two panes of content. I setup a listener for when a tab switch to the 'comments' pane happens. It fires the first time. But if I switch back and forth between tabs another time (or many times), the event never fires again.

$('#commentsTab').on('shown.bs.tab', function (e) {
   console.log("do stuff here");
});

and here's the tab html:

<ul class="nav nav-pills side-tabs" role="tablist">
   <li class="side-tab hidden-md hidden-lg" ng-class="oneColumn ? 'active' : ''" role="presentation">
      <a href="" data-target="#topcard" data-toggle="tab" role="tab">{{title}}</a>
   </li>
   <li class="side-tab" ng-class="oneColumn ? '' : 'active'" role="presentation">
      <a href="" data-target="#notes" data-toggle="tab" role="tab"><i class="fa fa-clone"></i>Notes</a>
   </li>
   <li role="presentation" class="side-tab">
      <a id="commentsTab" class="comments-tab" href="" data-target="#comments" data-toggle="tab" role="tab"><i class="fa fa-comment-o"></i>Feedback</a>
    </li>
</ul>

Anyone know how to make this work, so that I reliably get the event every time the tab is switched to?

Have you given the right `href` values on the `` tabs ? Can you also please share the html markup of the tab panel. — Nikhil Nanjappa, Feb 13 '16 at 08:16
@NikhilNanjappa - I'm using data-target for the tabs to find the right panel instead of href (to prevent angular from taking it as a route change) - I've added the html code above. That's working - the tabs reliably switch panels back and forth. It's the events that fire on the element that aren't working after the first time. It does always fire on the first tab switch (and only on the first), so I know I've registered for the right event/right element... Any other ideas? Thanks! — Rebecca, Feb 17 '16 at 06:57
This seems to be working for me Rebecca. No matter how many times I switch between the tabs, the event is firing all the time and I get the messages. — Nikhil Nanjappa, Feb 17 '16 at 07:17
I think it has something to do with your js resources. Can you check [my Fiddle here](https://jsfiddle.net/3w74rLvk/1/) if the resources versions etc are the same as yours or not. — Nikhil Nanjappa, Feb 17 '16 at 07:24
Thanks @NikhilNanjappa! Your code does work and I tried upgrading to bootstrap 3.3.6 to match your resources. Unfortunately that didn't fix it, but as I dug in further, I figured it out (posted the answer). Thanks! — Rebecca, Feb 20 '16 at 06:03

score 2 · Accepted Answer · answered Feb 20 '16 at 06:10

After a bit more investigation, I figured out the issue - posting in case it helps anyone...

I had an angular directive on the tab element that also registered for the same tab shown event. I'd forgotten that it unregistered (unbind()) from the event after the first time.

Apparently, this line was unbinding from all registered functions for the shown event, not just itself.

elem.unbind('shown');

So instead I restructured it to use a named function and unbind only that function (like in this answer):

        var unbind = function (elem) {
            elem.unbind('shown', scope.scrollFn);
        };

        scope.scrollFn = function (elem) {
            //do stuff here
            unbind(elem);
        };

        elem.on('shown.bs.tab', scope.scrollFn);

Now that unbinding doesn't affect my other function registered for the shown event in the original post.

Bootstrap tabs shown event only fires the first time and not on second or later tab switches

1 Answers1