Bootstrap tabs shown 事件仅在第一次触发，而不是在第二次或以后的选项卡切换时触发

Question

我使用的是 Bootstrap 3.3.5 版，并且有一个带有两个选项卡的视图，可以在两个内容窗格之间切换。我为侦听器设置了一个选项卡切换到“CMET”窗格的窗格。它第一次点火。但是，如果我再次（或多次）在选项卡之间来回切换，则该事件将永远不会再次触发。

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

这是标签页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>

任何人都知道如何进行这项工作，以便每次切换到选项卡时都能可靠地获取事件？

Answer 1

经过更多调查，我发现了问题 - 发布以防万一...

我在选项卡元素上有一个角度指令，它也注册了相同的选项卡显示事件。我忘记了它在第一次之后从事件中取消注册（unbind（））。

显然，这一行已解除与所示事件的所有已注册函数的绑定，而不仅仅是其自身。

elem.unbind('shown');

因此，我将其重组为使用命名函数并仅取消绑定该函数（如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);

现在解除绑定不会影响我为原始帖子中显示的事件注册的其他函数。