CODEWITHSUNDEEP
javascripttwitter-bootstraptabs
Rebecca
Rebecca

Reputation: 1062

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

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?

Upvotes: 2

Views: 1378

Answers (1)

Rebecca
Rebecca

Reputation: 1062

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.

Upvotes: 2

Related Questions