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

Question

我使用的是 Bootstrap 版本 3.3.5，并且有一个带有两个选项卡的 View ，可以在两个内容 Pane 之间切换。当标签切换到“评论” Pane 时，我设置了一个监听器。它第一次点火。但是，如果我再次(或多次)在选项卡之间来回切换，该事件将不会再次触发。

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

经过更多调查后，我发现了问题 - 发帖以防对任何人有帮助...

我在 tab 元素上有一个 angular 指令，它也注册了相同的 tab shown 事件。我忘记了它在第一次之后从事件中取消注册(unbind())。

显然，这一行解除了与显示事件的所有已注册函数的绑定(bind)，而不仅仅是它本身。

elem.unbind('shown');

因此，我将其重组为使用命名函数并仅取消绑定(bind)该函数(就像在这个 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);

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