Bootstrap tabs shown 事件仅在第一次触发，在第二次或以后的 tab 切换时不会触发

Question

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

$('#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

经过更多调查，我发现了问题 - post万一它对任何人都有帮助...

我在选项卡元素上有一个 angular 指令，该指令也注册了相同的选项卡显示事件。我忘记了它在第一次之后从事件中取消注册（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);

现在取消绑定不会影响我在原始 post 中为显示的事件注册的其他功能。

Bootstrap tabs shown 事件仅在第一次触发，在第二次或以后的 tab 切换时不会触发

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

javascript

tabs

twitter-bootstrap